Question

我正在使用JQuery Validator，我在stackoverflow中看到了很多解决方案，将所有验证放在“var”中，然后使用这个“var”.resetForm（）来重置对象，但这不起作用，这里我的榜样是JSFiddle。

我的意图后来：使用相同的Form，两种类型的块内部有不同的输入，当其中一个块发生变化时，我调用一个方法来重置验证，这样我就可以在重试时再次使用Validate提交。

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

Answer 1

您尝试呼叫的功能（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准备好时才包含变量。这是一个working jsFiddle。

Answer 2

如前所述，cancelForm()尚不存在。将所有内容包装在DOM ready事件处理函数中。
其次，您正在使用jQuery，因此可以使用jQuery的.on() method简单地将内联JavaScript替换为click处理程序。
最后，您form.submit()内不需要submitHandler。这是多余的，因为通过省略自定义submitHandler回调，您将获得submit() by the plugin's default。

我还在$('form').get(0).reset(); cancel处理程序中添加了click以清除表单内容。 As per the documentation，resetForm()需要另外一个插件...

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

试试这个：

<强>的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/

Answer 3

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

1-表格html：

$scope.$watch

2- Jquery验证

$scope.$watch('hour', function(newValue) {
   $scope.start_hour = {
        hour:new Date(newValue).getHours(),
        min:new Date(newValue).getMinutes()
    };  
});

3-重置表格

{{1}}

JQuery Validate - 使用函数重置表单，resetForm（）将不起作用

3 个答案: