javascript - Jquery 验证插件 |重置表格不起作用

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) Validate form using Jquery validation

您不能将 validator.resetForm(); 方法放在 .validate() 方法中。

.validate() 是一个插件方法，其中唯一可以进入的是 allowed 选项的逗号分隔映射，{option:value , option:value, etc.}, 根据the .validate() method documentation .

resetForm() method documentation

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

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

---

引用 OP:

2) When user click on a field error message should be cleared (per field)

这要归功于 focusCleanup 选项。正如您已经完成的那样，将其设置为 true，当您单击出现错误的字段时，错误将被清除。

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

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

---

引用 OP:

3) On clicking reset button, every error should be cleared

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

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