Question

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

使用Jquery验证验证表单
当用户点击字段时，应清除错误消息（每个字段）
点击重置按钮，应清除每个错误

这是我的代码

$( 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.}的逗号分隔地图，按照the .validate() method documentation

resetForm() method documentation

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

.validate()方法DEMO：http://jsfiddle.net/P46gL/

引用OP：

2）当用户点击字段时，应清除错误消息（每个字段）

这要归功于focusCleanup选项。如您所知，将其设置为true，当您单击带错误的字段时，错误将会清除。

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

focusCleanup DEMO：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();置于重置按钮的点击事件中。

Answer 3

如果没有任何作用，请尝试这种方法（特别是为了清除数据目的）：

1-表格html：

<input type='reset' class="button_grey resetForm" value='Reset'>

2- Jquery验证

// you can add error fields
var validator = $("#clearform").validate({
      focusCleanup: true
});

3-重置表格

$('[type="reset"]').on('click', function(){ 
      $("#clearform").closest('form').find("input[type=text], textarea").val(""); 
      $('input:checkbox').removeAttr('checked'); 
      validator.resetForm(); 
      return false;
});

Answer 4

将清除所有错误消息

$('.btn-reset').on('click', function () {
    $( "label.error" ).remove(); 
});

Jquery验证插件| resetForm不起作用

4 个答案: