使用jquery重置MVC表单

Question

如何重置表单？

即清除所有字段的值,并使用jquery删除ValidationSummary错误消息validation-summary-errors.

我使用下面的代码,但它不起作用:

    var validator = $("#myform").validate();
    validator.resetForm();

我正在使用asp.net MVC3,jquery脚本包含在我的页面中.

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Answer 1

当我遇到它时,我写了一个快速的jQuery扩展来处理这个问题:

• 清除字段级验证错误
• 清除/隐藏验证摘要
• 重置jQuery Validate的内部错误列表

它可以从表单内的元素$(选定)或自身的表单中调用.

这是一个调用示例(输入在表单中):

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

这是jQuery插件代码:

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

希望这有帮助!您可以在此处阅读有关它的更多信息并在我的博客文章中查看其他一些示例:

http://www.johnculviner.com/post/2011/11/16/ClearReset-MVC-3-Form-and-Unobtrusive-jQuery-Client-Validation.aspx

Answer 2

$('.field-validation-error')
    .removeClass('field-validation-error')
    .addClass('field-validation-valid');

$('.input-validation-error')
    .removeClass('input-validation-error')
    .addClass('valid');

Answer 3

你可以使用原生解决方案(验证1.9.0 +不引人注目)

var $form = $(this).closest('form');

// reset errors with unobtrusive
$form.trigger('reset.unobtrusiveValidation');

// reset inputs
var validator = $form.validate(); // get saved validator
//validator.settings.ignore = ''; // if form hided (closed ui dialogs, etc)
validator.resetForm();