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

我已经完成了所有工作，但重置了。

任何进一步的帮助将不胜感激..

$（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",                       
        });

});


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

Answer 3

您似乎正在使用jQuery Form Plugin。

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

方法1：使用 resetForm() 方法

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

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

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

Answer 4

将您的ajaxForm电话转移到验证插件的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();
      });
    }                    
  });
});

添加JQuery验证代码后，Ajax表单提交不重置或触发警报

4 个答案: