Ajax绕过了JQuery验证

Ajax绕过了JQuery验证,jquery,ajax,forms,plugins,jquery-validate,Jquery,Ajax,Forms,Plugins,Jquery Validate,我目前正在表单上使用Jquery验证。不过,我也在使用ajax提交。当我单击submit时,尽管我进行了验证,但表单在没有填写输入的情况下仍然会通过。请告知 $(function() { $("#mytestform" ).validate({ rules: { aname: { required: true, minlen

我目前正在表单上使用Jquery验证。不过,我也在使用ajax提交。当我单击submit时,尽管我进行了验证,但表单在没有填写输入的情况下仍然会通过。请告知

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
这是我的密码:

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
Jquery验证代码:

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
$(函数(){
$(“#mytestform”).validate({
规则:{
阿纳姆:{
要求:正确,
最小长度:4,
最大长度:20
},
请求:{
要求:正确,
最小长度:4
},
电邮:{
要求:正确,
电子邮件:真的
},                      
},
信息:{
电子邮件:“输入有效的电子邮件地址。”,
},
});
});
以下是我的ajax代码:
//var dataString='name='+name+'&email='+email+'&phone='+phone;
//警报(数据串);返回false;
$(“#mytestform”).submit(函数(事件){
//发出请求后立即分配处理程序,//并记住此请求的jqxhr对象
event.preventDefault();
var jqxhr=$.post(“testme.php”,$(“#mytestform”).serialize();
完成(函数(数据,文本状态,jqxhr){
//警报(文本状态+第二次成功+数据);
$(“已提交联系人表单!

”).prependTo(“#mytestform”);
$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
} ); fail(函数(jqxhr,textStatus,errorhorn){alert(“您的表单“+”+errorhorn有问题);}); });

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
这是我的html:

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
<div id = "dvdform"> <!-- begin of form -->
<form id="mytestform" name="mytestform" action="testme.php" method="post">
<fieldset>
<legend><strong>Contact Me</strong></legend>
<div id= "formsection">
<div><p> <label for="aname">Name:&nbsp;</label> <input name="aname" class="boxform" minlength=4 />
                   </p> </div>
<div><p><label for="email">E-mail</label> <input type="text" name="email"  maxlength="40"class="boxform" />
</p></div>
<div><p><label for="city">City</label> <input type="text" name="city"   class="boxform" maxlength="40" />
<br />
</p></div>
<div><p><label for="country">Company</label> <input type="text" name="country"  class="boxform" maxlength="40" />
<br />
</p></div>
<p><label for="country">Comments</label> <textarea name="req" class="required" cols="35" rows="30" style="height:100px;"> </textarea><br />
<br />
</p>

<div align="center" class="submitbox"> 
  <input type="submit" value="SUBMIT" style="width:175px; height:20px;"> 
</div>
</div> 
<!-- End of Form Section -->
</fieldset>
 </form> 
</div>

COMBINING IT using the submithandler still does not work:
$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },

             submitHandler: function(form) {
                var jqxhr = $.post("testme.php", $("#mytestform").serialize());
        jqxhr.done(function(data, textStatus, jqXHR) { 
            //alert(textStatus + " second success " + data); 
            $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

         }
        );      
        jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
    });  
   });
});

</script>

联系我
姓名:

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
电子邮件

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
城市

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
公司

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
评论

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
使用submithandler组合它仍然不起作用: $(函数(){ $(“#mytestform”).validate({ 规则:{ 阿纳姆:{ 要求:正确, 最小长度:4, 最大长度:20 }, 请求:{ 要求:正确, 最小长度:4 }, 电邮:{ 要求:正确, 电子邮件:真的 }, }, 信息:{ 电子邮件:“输入有效的电子邮件地址。”, }, submitHandler:函数(表单){ var jqxhr=$.post(“testme.php”,$(“#mytestform”).serialize(); 完成(函数(数据,文本状态,jqxhr){ //警报(文本状态+第二次成功+数据); $(“已提交联系人表单!

”).prependTo(“#mytestform”);
$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
} ); fail(函数(jqxhr,textStatus,errorhorn){alert(“您的表单“+”+errorhorn有问题);}); }); }); });
您的代码和验证插件都绑定了
提交事件的处理程序。我认为不能保证验证的处理程序会首先运行

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
相反,将AJAX调用实现为验证插件的
submitHandler
选项。这确保它执行验证,并且仅在validaiton成功时运行AJAX代码

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
$(function () {
    $("#mytestform").validate({
        rules: {
            aname: {
                required: true,
                minlength: 4,
                maxlength: 20
            },
            req: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            }
        },

        messages: {
            email: "Enter a valid email address."
        },

        submitHandler: function (form) {
            var jqxhr = $.post("testme.php", $("#mytestform").serialize());
            jqxhr.done(function (data, textStatus, jqXHR) {
                //alert(textStatus + " second success " + data); 
                $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

            });
            jqxhr.fail(function (jqXHR, textStatus, errorThrown) {
                alert("There was an issue with your form" + " " + errorThrown);
            });
        }
    });
});
$(函数(){
$(“#mytestform”).validate({
规则:{
阿纳姆:{
要求:正确,
最小长度:4,
最大长度:20
},
请求:{
要求:正确,
最小长度:4
},
电邮:{
要求:正确,
电子邮件:真的
}
},
信息:{
电子邮件:“输入有效的电子邮件地址。”
},
submitHandler:函数(表单){
var jqxhr=$.post(“testme.php”,$(“#mytestform”).serialize();
完成(函数(数据、文本状态、jqxhr){
//警报(文本状态+第二次成功+数据);
$(“已提交联系人表单!

”).prependTo(“#mytestform”);
$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
}); 失败(函数(jqxhr、textStatus、errorshown){ 警报(“您的表单“+”+错误抛出有问题); }); } }); });

您不需要使用此插件的外部
单击
提交
处理程序。一切都是自动处理的。您将
ajax
放在
submitHandler
回调函数中,表单在
ajax
函数启动之前得到可靠验证。您还需要一个
return false
作为
submitHandler
回调函数中的最后一行,以阻止表单提交时的默认页面重定向。(对于插件的更高版本,您似乎不需要返回false,因为在使用回调时它已经内置在插件中;使用它不会造成任何伤害。)

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
:

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
submitHandler,回调,默认:默认(本机)表单提交
回调,用于在表单提交时处理实际提交 有效。获取窗体作为唯一参数。替换默认值 提交通过Ajax提交表单的正确位置 验证

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 
演示:

$(function() {
   $("#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                   },
                   req: {
                           required: true,
                           minlength: 4                        
                                              },
                        email: {
                               required: true,
                               email: true
                       },                      
           },

           messages: {
                       email: "Enter a valid email address.",
             },
   });
});

</script>


Here is my ajax code:
<script language="Javascript">
   //var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
    //alert (dataString);return false;  
    $("#mytestform").submit(function(event) {
        // Assign handlers immediately after making the request,// and remember the jqxhr object for this request
    event.preventDefault();
    var jqxhr = $.post("testme.php", $("#mytestform").serialize());
    jqxhr.done(function(data, textStatus, jqXHR) { 
        //alert(textStatus + " second success " + data); 
        $('<p>Contact Form Submitted!</p>').prependTo('#mytestform');

     }
    );      
    jqxhr.fail(function(jqXHR, textStatus, errorThrown) { alert("There was an issue with your form" + " " + errorThrown); });       
}); 

@JacklynN,您需要一个
返回false
作为
submitHandler
回调函数中的最后一行,以阻止提交时的正常页面重定向。有关演示,请参见我的答案。@Sparky您链接到的文档中的示例没有返回false。@Barmar