jquery - 重置验证并清除 Asp.Net MVC 自定义验证的验证消息

Question

我使用 MVC 3 和 jQuery 1.7.2，并且在客户端和服务器端实现了一些自定义验证，以验证某个文本区域在选中复选框时是否有文本。

我的客户端代码实现不显眼的验证如下所示:

 $.validator.addMethod("requiredif", function (value, element, params) {
    if (value) {
      var id = '#' + params["otherproperty"];
      var control = $(id);
      if (control.val() == '') {
        return false;
      }
    }

    return $.validator.methods.required.call(this, value, element, params);
});

$.validator.unobtrusive.adapters.add("requiredif", ["otherproperty"], function(options) {
   options.rules["requiredif"] = options.params;
   options.messages["requiredif"] = options.message;
});

我的问题是，即使我随后返回并取消选中该复选框(即不再需要文本)，验证也会触发，验证消息仍保持不变并且验证不会被清除。

我已尝试以下方法来清除验证:

 $('#Dashboard').on('change', '#Damaged', null, function () {
   var validator = $('#Gridform').validate();
   validator.resetForm();
 });

但这没有任何区别。

我希望验证的工作方式与标准验证相同，即当我取消选中复选框或在文本区域中输入内容时，验证将被清除/重置。

Answer 1

尝试这个解决方案，它在我的项目中有效:

<button type="reset" onclick="$('.text-danger').hide();">Reset</ button>

<button type="submit" onclick="$('.text-danger').show();">Submit</button>

您也可以像在项目中一样更改选择器，在我的例子中，我将 (text-danger) 类添加到我的验证器中，如下所示:

@Html.ValidationMessageFor(model => model.fieldName, "", new { @class = "text-danger" })

<小时/>

此外，约翰·卡尔文纳 (John Culviner) 我发现了一个更好的解决方案，它运行得很好

1-包含jquery(页面结束)后编写此脚本:

<script>
    //clear validation on reset button clicked
    (function ($) { 
        //re-set all client validation given a jQuery selected form or child
        $.fn.resetValidation = function () {
            var $form = this.closest('form');

            //reset jQuery Validate's internals
            $form.validate().resetForm();

            //reset unobtrusive validation summary, if it exists
            $form.find("[data-valmsg-summary=true]")
                .removeClass("validation-summary-errors")
                .addClass("validation-summary-valid")
                .find("ul").empty();

            //reset unobtrusive field level, if it exists
            $form.find("[data-valmsg-replace]")
                .removeClass("field-validation-error")
                .addClass("field-validation-valid")
                .empty();

            return $form;
        };
    })(jQuery);
</script> 

2-添加点击事件调用Jquery函数

<button type="reset" onclick="$(this).resetValidation()" >Reset</button>

See here for article by John