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 DEMO： http ： //jsfiddle.net/P46gL/1/

---

引用OP：

3）點擊重置按鈕，應清除每個錯誤

您可以在重置按鈕的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/

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(); 
});