添加jQuery验证代码后，AJAX表单不提交不重置或发射警报

Question

我在添加jQuery验证之前就可以正常工作。现在，就目前而言，验证效果很好，一旦按下提交按钮，我确实会收到电子邮件，但是最后两个语句（表格重置和警报）不再发射。我在这里做错了什么？

<script type="text/javascript"> 
// wait for the DOM to be loaded 
        $(document).ready(function() { 
        $('#contact_form').validate({
        rules:{
        namefield:{
        required:true,
        minlength: 10
        },
        emailaddress:{
        required:true,
        minlength: 12,
        email: true
        },
        textmessage:{
        required:true,
        minlength: 12,
        maxlength: 2500
    },                  
},
        errorElement: "div",
        wrapper: "div class="validatemessage""
     }),
        $('#contact_form').ajaxForm(function() {
        $('#contact_form')[0].reset(); 
        alert("Thank you for your email!");
});
});
</script>

Answer 1

            $(document).ready(function() { 
        $('#contact_form').validate({
        rules:{
        namefield:{
        required:true,
        minlength: 10
        },
        emailaddress:{
        required:true,
        minlength: 12,
        email: true
        },
        textmessage:{
        required:true,
        minlength: 12,
        maxlength: 2500
    }                 
},
        errorElement: "div",
    wrapper: "div class="validatemessage""
   });  
        $('#contact_form').ajaxForm(function() {
        $('#contact_form')[0].reset();
        alert("Thank you for your email!");
});
});

Answer 2

看来您正在使用jQuery表单插件。

您可以以两种方式重置表格：

方法1：使用 resetForm() 方法

$('#contact_form').ajaxForm(function() {
    alert("Thank you for your comment!")
    $('#contact_form').resetForm();
});

方法2：在您的表单选项中使用 resetForm 属性

重置
布尔标志指示是否应重置该表格 提交成功
默认值： null

Answer 3

将ajaxForm调用移动到validate插件的submitHandler函数：

$(document).ready(function(){
   $("#contact_form").validate({
      rules:{
        namefield:{
        required: "Please enter your name",
        minlength: 10
        },
        emailaddress:{
        required:true,
        minlength: 12,
        email: true
        },
        textmessage:{
        required:"Your message is too short.",
        minlength: 12,
        maxlength: 2500
        }                 
    },
    errorElement: "div",
    wrapper: "div",  
    submitHandler:function(form){
      $(form).ajaxForm(function() {
        alert("Thank you for your comment!")
        form.reset();
      });
    }                    
  });
});