1

我正在使用 JQuery Validator，我在 stackoverflow 中看到了许多解决方案，将所有验证放在“var”中，然后使用这个“var”.resetForm() 重置对象，但这不起作用，这是我的JSFiddle以我为例。

我后来的打算：使用相同的表单，两种类型的块，里面有不同的输入，当其中一个块发生变化时，我调用一个方法来重置验证，这样我可以在尝试提交时再次重用验证。

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

3 回答 3

4

您尝试调用的函数 ( 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 准备好时才会包含一个变量。这是一个有效的 jsFiddle。

于 2013-02-14T13:52:11.180 回答
1

  • 如前所述，cancelForm()尚不存在。将所有内容包装在 DOM 就绪事件处理函数中。

  • 其次，您使用的是 jQuery，因此内联 JavaScript 可以简单地替换为click使用 jQuery 的.on()方法的处理程序。

  • 最后，您不需要form.submit()在submitHandler. 这是多余的，因为通过省略您的自定义submitHandler回调，您将获得submit() 插件默认的.

我还在处理程序中添加了一个$('form').get(0).reset();以cancel click清除表单内容。 根据文档，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();
    });

});

HTML：

<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>

工作演示：http: //jsfiddle.net/rnryw/

于 2013-02-14T16:52:40.747 回答
0

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

1-表单html：

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

2-jQuery 验证

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

3- 重置表格

$('[type="reset"]').on('click', function(){ 
      $("#cad_principal").closest('form').find("input[type=text], textarea").val(""); 
      $('input:checkbox').removeAttr('checked'); 
      validator.resetForm(); 
      return false;
});
于 2015-06-17T12:56:29.020 回答