JQuery Validate-使用函数resetForm（）重置表单；行不通

我正在使用JQuery Validator，我在stackoverflow中看到了许多解决方案，将所有验证放在一个“var”中，然后使用这个“var”.resetForm（）重置对象，但这不起作用，下面是我的示例

我稍后的意图：使用相同的形式，两种类型的块，其中一个块的输入不同，当其中一个块发生变化时，我调用一个方法重置验证，以便在尝试提交时可以再次使用验证

 var validate = $('#cad_principal').validate({
      errorLabelContainer: $('.form_validate_message'),
      wrapper:'li',
      rules:{
        cad_pf_cpf:{required:true, minlength:11}
      },
      messages:{
        cad_pf_cpf:{required:"O campo CPF precisa ser preenchido.", minlength:"O campo CPF deve conter no mínimo 11 caracteres."}
      },
      submitHandler: function(form) {
        $(form).submit();
      }
  });

function cancelForm(){
    validate.resetForm();
}

---

您试图调用的函数（

cancelForm（）

）不存在。试试这个：

$(function() {  
    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper:'li',
        rules:{
            cad_pf_cpf:{required:true, minlength:11}
        },
        messages:{
            cad_pf_cpf:{required:"O campo CPF precisa ser preenchido.", minlength:"O campo CPF deve conter no mínimo 11 caracteres."}
        },
        submitHandler: function(form) {
            $(form).submit();
        }
    });

    $('#cad_principal a').click(function() { validate.resetForm(); });
});

---

基本上，您需要将代码包装在DOMReady事件中，然后使用事件绑定来连接表单。请记住，

validate

仅在DOM就绪时才包含变量。这里有一个。

您试图调用的函数（

cancelForm（）

）不存在。试试这个：

$(function() {  
    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper:'li',
        rules:{
            cad_pf_cpf:{required:true, minlength:11}
        },
        messages:{
            cad_pf_cpf:{required:"O campo CPF precisa ser preenchido.", minlength:"O campo CPF deve conter no mínimo 11 caracteres."}
        },
        submitHandler: function(form) {
            $(form).submit();
        }
    });

    $('#cad_principal a').click(function() { validate.resetForm(); });
});

基本上，您需要将代码包装在DOMReady事件中，然后使用事件绑定来连接表单。请记住，

validate

仅在DOM就绪时才包含变量。这是一个。

• 如前所述，

  cancelForm（）

  尚不存在。将所有内容包装在DOM就绪事件处理程序函数中

• 其次，您使用的是jQuery，因此可以使用jQuery的

  click

  处理程序简单地替换内联JavaScript

• 最后，在

  submitHandler

  中不需要

  form.submit（）

  。这是多余的，因为省略自定义的

  submitHandler

  回调，您将得到一个

  submit（）

我还添加了一个

$（'form'）.get（0.reset（）

到

取消

单击

处理程序以清除表单内容

resetForm（）

需要另一个插件来完成此操作

重置受控窗体
将输入字段重置为原始字段 值（需要表单插件），删除指示无效的类 元素并隐藏错误消息

---

试试这个：

$(function() {  
    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper:'li',
        rules:{
            cad_pf_cpf:{required:true, minlength:11}
        },
        messages:{
            cad_pf_cpf:{required:"O campo CPF precisa ser preenchido.", minlength:"O campo CPF deve conter no mínimo 11 caracteres."}
        },
        submitHandler: function(form) {
            $(form).submit();
        }
    });

    $('#cad_principal a').click(function() { validate.resetForm(); });
});

jQuery：

$(document).ready(function () {

    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper: 'li',
        rules: {
            cad_pf_cpf: {
                required: true,
                minlength: 11
            }
        },
        messages: {
            cad_pf_cpf: {
                required: "O campo CPF precisa ser preenchido.",
                minlength: "O campo CPF deve conter no mínimo 11 caracteres."
            }
        }
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

<div class="form_validate_message"></div>
<form id="cad_principal" method="post">
    <input type="text" name="cad_pf_cpf" />
    <input type="submit" />
    <br />
    <a id="cancel" href="#">cancel</a>
</form>

HTML：

$(document).ready(function () {

    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper: 'li',
        rules: {
            cad_pf_cpf: {
                required: true,
                minlength: 11
            }
        },
        messages: {
            cad_pf_cpf: {
                required: "O campo CPF precisa ser preenchido.",
                minlength: "O campo CPF deve conter no mínimo 11 caracteres."
            }
        }
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

<div class="form_validate_message"></div>
<form id="cad_principal" method="post">
    <input type="text" name="cad_pf_cpf" />
    <input type="submit" />
    <br />
    <a id="cancel" href="#">cancel</a>
</form>

工作演示：

• 如前所述，

  cancelForm（）

  尚不存在。将所有内容包装在DOM就绪事件处理程序函数中

• 其次，您使用的是jQuery，因此可以使用jQuery的

  click

  处理程序简单地替换内联JavaScript

• 最后，在

  submitHandler

  中不需要

  form.submit（）

  。这是多余的，因为省略自定义的

  submitHandler

  回调，您将得到一个

  submit（）

我还添加了一个

$（'form'）.get（0.reset（）

到

取消

单击

处理程序以清除表单内容

resetForm（）

需要另一个插件来完成此操作

重置受控窗体
将输入字段重置为原始字段 值（需要表单插件），删除指示无效的类 元素并隐藏错误消息

---

试试这个：

$(function() {  
    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper:'li',
        rules:{
            cad_pf_cpf:{required:true, minlength:11}
        },
        messages:{
            cad_pf_cpf:{required:"O campo CPF precisa ser preenchido.", minlength:"O campo CPF deve conter no mínimo 11 caracteres."}
        },
        submitHandler: function(form) {
            $(form).submit();
        }
    });

    $('#cad_principal a').click(function() { validate.resetForm(); });
});

jQuery：

$(document).ready(function () {

    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper: 'li',
        rules: {
            cad_pf_cpf: {
                required: true,
                minlength: 11
            }
        },
        messages: {
            cad_pf_cpf: {
                required: "O campo CPF precisa ser preenchido.",
                minlength: "O campo CPF deve conter no mínimo 11 caracteres."
            }
        }
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

<div class="form_validate_message"></div>
<form id="cad_principal" method="post">
    <input type="text" name="cad_pf_cpf" />
    <input type="submit" />
    <br />
    <a id="cancel" href="#">cancel</a>
</form>

HTML：

$(document).ready(function () {

    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper: 'li',
        rules: {
            cad_pf_cpf: {
                required: true,
                minlength: 11
            }
        },
        messages: {
            cad_pf_cpf: {
                required: "O campo CPF precisa ser preenchido.",
                minlength: "O campo CPF deve conter no mínimo 11 caracteres."
            }
        }
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

<div class="form_validate_message"></div>
<form id="cad_principal" method="post">
    <input type="text" name="cad_pf_cpf" />
    <input type="submit" />
    <br />
    <a id="cancel" href="#">cancel</a>
</form>

---

工作演示：

如果没有任何效果，请尝试此方法（专门用于清除数据）：

1-表格html：

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

3-重置表单

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

---

如果没有任何效果，则尝试此方法（特别是为了清除数据）：

1-表格html：

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

3-重置表单

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

---

在保存示例之前，应该检查它是否没有抛出javascript错误。使用浏览器的控制台，答案就在那里。在保存示例之前，您应该检查示例是否没有抛出javascript错误。使用浏览器的控制台，答案就在那里。另外，您可以考虑做<代码> $（“表单”）。获取（0）.ReSET（）；<单击函数中的code>以完全清除表单。无论如何，这应该由

validate

元素的

resetForm（）

方法来处理。是的。。。但事实并非如此：）它需要“表单”插件来实现该功能。另外，您可以考虑执行<代码> $（“窗体”）。获取（0）.ReSeET（）；<单击函数中的code>以完全清除表单。无论如何，这应该由

validate

元素的

resetForm（）

方法来处理。是的。。。但事实并非如此：）它需要“表单”插件来实现该功能。