jquery - 添加 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

看来您正在使用jQuery Form Plugin。

您可以通过 2 种方式重置表单：

方法一：使用 resetForm() 方法

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

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

resetForm
布尔标志，表示如果提交成功，是否应重置表单
默认值：null

Answer 2

将您的ajaxForm调用移至submitHandlervalidate 插件的函数中：

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

Answer 3

            $(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!");

});
});