Показать сообщение вместо предупреждения

Вы можете создать собственное всплывающее окно. Или используйте какие-нибудь плагины.

http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html

Или вы можете создать элемент на странице, который будет отображать сообщения об ошибках. Напишите несколько стилей и сделайте так, чтобы это выглядело потрясающе!

<div class="error-messages" style="display:none;"></div>

После отправки формы и проверки ошибок напишите это.

$(".error-messages").text("Some error").fadeIn();

Или вы можете сделать его пустым и скрыть через несколько секунд или после фокуса пользователя.

$(".error-messages").empty().fadeOut();

Вы можете вставить скрытый div над своей формой и показать его вместо предупреждения.

<div class="form-errors"></div>

$(".form-errors").text("The form is not complete").show();

Вы должны работать с DOM, например. что-то вроде этого:

$('#errorDiv').append("Error on element" + elementName);

где вы должны предопределить Div ошибки ('#errorDiv').

Добавьте скрытый div, выровненный с вашими элементами, и покажите сообщение о скрытом div вместо окна предупреждения.

Как упоминалось в других ответах, вы должны работать с DOM. Однако, если у вас есть время, я бы посоветовал вам не просто копировать/вставлять строку jquery, а изучить, что такое DOM на самом деле и как манипулировать ею в чистом javascript. Вот отправная точка:

https://developer.mozilla.org/en/docs/DOM

Вот код, который я использую для формы, может быть, это может помочь.

<script type="text/javascript">
        $('document').ready(function(){

        $('#form').validate({
             ignore: ".ignore",
                rules:{
                    "name":{
                        required:true,
                        maxlength:40
                    },

                    "phone":{
                        required:true,                            
                    },

                    "email":{
                        required:true,
                        email:true,
                        maxlength:100
                    },

                    hiddenRecaptcha: {
                        required: function () {
                            if (grecaptcha.getResponse() == '') {
                                return true;
                            } else {
                                return false;
                            }}},

                    "message":{
                        required:true
                    }},

                messages:{
                    "name":{
                        required:"Please tell us your name"
                    },
                    "phone":{
                        required:"Please tell us your phone number"
                    },

                    "email":{
                        required:"How can we send you information? We promise, we will never give away your email!",
                        email:"Please enter a valid email address"
                    },

                    "hiddenRecaptcha":{
                        required:"Please check the box to show us you are human"  
                    },

                    "message":{
                        required:"Please tell us what we can tell you about this vessel"
                    }},

                submitHandler: function(form){
                  $(form).ajaxSubmit({
    target: '#preview', 
    success: function() { 
    $('#formbox').slideUp('fast'); 
    } 
});     
                }
        })          
    });
    </script>


<div id="preview"></div>
        <div id="formbox">  
        <div>    
        <p class="contactform">Contact Form:</p>  
            <form name="form" id="form" action="http://www.yourdomaingoeshere.com/submit.php" method="post">
            <div class="g-recaptcha" data-sitekey="your site key goes here" style="padding-bottom: 20px!important;"></div>
                    <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
                <ul id="ngothastyle3" class="mylist">                       
                    <li class="mylist">                        
                        <input type="text" placeholder="your name" name="name" class=""  />
                    </li>
                    <li class="mylist">
                        <input type="text" placeholder="phone number" name="phone" class="" />
                    </li>
                     <li class="mylist">                        
                        <input type="text" placeholder="email" name="email" class="" />
                    </li>
                    <li class="mylist">                        
                        <textarea name="message" placeholder="comments" rows="5" cols="45" class=""></textarea>
                    </li>

        </div> 


        <div style="float: right;">
                    <li class="mylist" style="list-style: none;">                        
                        <input type="submit" value="Send"/>
                    </li>
        </div>            
                </ul>
            </form>