jQuery验证插件| resetForm无法正常工作 [英] Jquery validation plugin | resetForm is not working

问题描述

当用户单击clear form按钮时，我正在尝试清除所有错误消息以及错误突出显示，以下是实际要求

I am trying to clear all error messages as well error highlighting when user click on the clear form button, below are actual requirements

1. 使用Jquery验证来验证表单
2. 用户单击字段时，应清除错误消息(每个字段)
3. 单击重置"按钮后，应清除每个错误

这是我的代码

$( document ).ready(function(){
   var validator = $("#register_form").validate({
   validator.resetForm();
   focusCleanup: true,
 rules: {
  // custom rules
},
messages: {
// custom messages
    }
  });

对我来说，前两项工作正常，但是当我尝试清除完整表格时，我无法执行此操作.这就是我尝试清除的方式

For me, first 2 things are working, but when I am trying to clear complete form, I am not able to do this.this is how I am trying to clear it

function clearInputForm(){
  alert("");
  var validator1 = $( "#register_form" ).validate();
  validator1.resetForm();
   $("#register_form")[0].reset();
}

但是什么也没发生，尽管使用$("#register_form")[0].reset();时，表单字段正在清除，但错误消息并没有清除.

But nothing is happening , though with $("#register_form")[0].reset();, form fields are getting clear, but error messages are not getting cleared.

推荐答案

引用OP:

1)使用Jquery验证来验证表单

您不能将validator.resetForm();方法放在.validate()方法内部.

You cannot put the validator.resetForm(); method inside of the .validate() method.

.validate()是一种插件方法，其中唯一可以进入的是按照

.validate() is a plugin method where the only thing that can go inside is a comma separated map of the allowed options, {option:value, option:value, etc.}, as per the .validate() method documentation.

resetForm()方法文档

$("#register_form").validate({
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        cell: {
            required: true
        }
    },
    messages: {
        // custom messages
    }
});

.validate()方法演示: http://jsfiddle.net/P46gL/

.validate() method DEMO: http://jsfiddle.net/P46gL/

引用OP:

2)用户单击字段时，应清除错误消息(每个字段)

这要感谢focusCleanup选项.完成后，将其设置为true，然后单击带有错误的字段，该错误将清除.

This is thanks to the focusCleanup option. As you've already done, set it to true and when you click on the field with an error, the error clears.

$("#register_form").validate({
    focusCleanup: true,
    rules: {
       ....

focusCleanup演示: http://jsfiddle.net/P46gL/1/

focusCleanup DEMO: http://jsfiddle.net/P46gL/1/

引用OP:

3)单击重置按钮后，应清除每个错误

您将从重置按钮的click处理程序中调用resetForm()方法.这将立即从整个表单中删除所有错误消息，并将验证插件重置为其初始状态.

You would call the resetForm() method from within a click handler of the reset button. This will immediately remove all error messages from the entire form and reset the validation plugin to its initial state.

$('#clearform').on('click', function () {
    $("#register_form").validate().resetForm();  // clear out the validation errors
});

确保重置按钮为type="button"或type="reset"，否则它将触发验证.

Make sure the reset button is type="button" or type="reset" or it will trigger validation.

<input type="reset" id="clearform" value="reset form" />

清除错误演示: http://jsfiddle.net/P46gL/3/

Clear Errors DEMO: http://jsfiddle.net/P46gL/3/

清除现场数据

您可以像这样调用JavaScript .reset()清除字段的值.

You can clear out the values of the fields by calling a JavaScript .reset() like this.

$('#clearform').on('click', function () {
    var form = $("#register_form");
    form.validate().resetForm();      // clear out the validation errors
    form[0].reset();                  // clear out the form data
});

完全正常的演示: http://jsfiddle.net/P46gL/4/

Full Working DEMO: http://jsfiddle.net/P46gL/4/

这篇关于jQuery验证插件| resetForm无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！