Question

我目前正在使用表单上的Jquery验证。但是我也使用ajax提交。当我单击提交时，尽管事实上我已经进行了验证，但没有填写输入表格。请指教。

这是我的代码：

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); });       
});

这是我的HTML：

<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>

Answer 1

您的代码和验证插件都绑定了submit事件的处理程序。我不认为可以确保验证处理程序首先运行。

相反，将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."
        },

        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);
            });
        }
    });
});

FIDDLE

Answer 2

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

As per documentation：

submitHandler ，回调，默认：默认（本机）表单提交
当表单处理实际提交时回调有效。获取表单作为唯一参数。替换默认值提交。 在此之后通过Ajax提交表单的正确位置 验证

DEMO：http://jsfiddle.net/Sf5j2/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules and/or options,
        submitHandler: function (form) {
            // ajax goes here
            return false; // needed when using ajax
        }
    });

});

Ajax绕过了JQuery验证

2 个答案: