Jqueryvalidation插件| resetForm不起作用

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

1. 使用Jqueryvalidationvalidation表单
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）使用Jqueryvalidationvalidation表单

你不能把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()方法。 这将立即从整个表单中删除所有错误消息，并将validation插件重置为其初始状态。

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

确保重置按钮为type="button"或type="reset" ，否则将触发validation。

清除错误演示： 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：

2- Jqueryvalidation

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