Jquery验证插件| resetForm不起作用

Question

我试图清除所有错误消息以及用户单击clear form按钮时的错误突出显示,下面是实际要求

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

这是我的代码

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

对我来说,前两件事情正在发挥作用,但当我试图清除完整的表格时,我无法做到这一点.这就是我试图清除它的方式

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

但是没有任何事情发生,尽管如此 $("#register_form")[0].reset();,表单字段变得清晰,但错误消息没有被清除.

Answer 1

引用OP:

1)使用Jquery验证验证表单

你不能把validator.resetForm();方法的内部.validate()方法.

.validate()在这里,可以去里面的仅仅是一个逗号分隔的地图插件的方法允许选项{option:value, option:value, etc.},按照该.validate()方法的文档.

resetForm() 方法文档

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

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

引用OP:

2)当用户点击字段时,应清除错误消息(每个字段)

这要归功于focusCleanup选项.正如您已经完成的那样,将其设置为true,当您单击带有错误的字段时,错误将清除.

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

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

引用OP:

3)点击重置按钮,应清除每个错误

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

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

确保重置按钮是type="button"或type="reset"将触发验证.

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

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

清除现场数据

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

$('#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/

Answer 2

$("#register_form")[0].reset();，表单字段变得越来越清晰，但错误消息却没有被清除。

为此，您可以在其下方再添加一行：

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

虽然你应该这样做：

$( document ).ready(function(){
   var validator = $("#register_form").validate({
       focusCleanup: true,
       rules: {
         // custom rules
       },
       messages: {
         // custom messages
       }
    });
    $('[type="reset"]').on('click', function(){
       validator.resetForm();
    });
});

您应该将您的validator.resetForm();代码放在重置按钮的单击事件中。