使用 jquery 重置 MVC 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5457393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reset MVC form with jquery
提问by Ghooti Farangi
How do I reset a form?
如何重置表单？
i.e. Clear values of all fields and remove ValidationSummary error messages validation-summary-errors with jquery.
即清除所有字段的值并使用jquery删除ValidationSummary错误消息validation-summary-errors。
I use the below code but it does not work:
我使用下面的代码，但它不起作用：
var validator = $("#myform").validate();
validator.resetForm();
I'm using asp.net MVC3 and the jquery scripts are include in my page.
我正在使用 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>
回答by John Culviner
I wrote a quick jQuery extension to handle this issue when I encountered it which:
当我遇到这个问题时，我编写了一个快速的 jQuery 扩展来处理它：
- Clears field level validation errors
- Clears/hides validation summary
- Resets jQuery Validate's internal error list
- 清除字段级验证错误
- 清除/隐藏验证摘要
- 重置 jQuery Validate 的内部错误列表
It can be called from an element $(selected) within the form or on the form its self.
它可以从表单内的元素 $(selected) 或表单本身调用。
Here is a calling example (the input is within a form):
这是一个调用示例（输入在表单中）：
<input onclick="$(this).resetValidation()" type="reset" value="Reset" />
Here is the jQuery plugin code:
这是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);
Hopefully this helped! You can read more about it and see some other examples on my blog post here as well:
希望这有帮助！你可以阅读更多关于它的内容，也可以在我的博客文章中查看其他一些示例：
回答by Darin Dimitrov
$('.field-validation-error')
.removeClass('field-validation-error')
.addClass('field-validation-valid');
$('.input-validation-error')
.removeClass('input-validation-error')
.addClass('valid');
回答by Towa48
you could use native solution (validate 1.9.0 + unobtrusive)
您可以使用本机解决方案（验证 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();
回答by Kennifer
To follow up from Darin Dimitrov's message the following will also clear the validation summary...
为了跟进 Darin Dimitrov 的消息，以下内容还将清除验证摘要...
$(".validation-summary-errors")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid");
回答by Gudradain
To completement Darin and Kennifer answer, I put everything together and added a last part to reenable lazy validation
为了完成 Darin 和 Kennifer 的回答，我将所有内容放在一起并添加了最后一部分以重新启用延迟验证
//Reset validation message
$('.field-validation-error')
.removeClass('field-validation-error')
.addClass('field-validation-valid');
//Reset input, select and textarea style
$('.input-validation-error')
.removeClass('input-validation-error')
.addClass('valid');
//Reset validation summary
$(".validation-summary-errors")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid");
//To reenable lazy validation (no validation until you submit the form)
$('form').removeData('unobtrusiveValidation');
$('form').removeData('validator');
$.validator.unobtrusive.parse($('form'));
回答by Barmeshwar Singh
The following code uses findto search first for the containerthen the child list. If the list is empty the class validation-summary-validis added to the container and validation-summary-errorsremoved.
以下代码用于find首先搜索containerthen 的 child list。如果列表为空，则将类validation-summary-valid添加到容器中并validation-summary-errors删除。
var container = $('form').find('[data-valmsg-summary="true"]');
var list = container.find('ul');
if (list && list.length) {
list.empty();
container.addClass('validation-summary-valid').removeClass('validation-summary-errors');
回答by Ravia
Hope this helps you http://www.electrictoolbox.com/jquery-clear-form/
希望这对您有所帮助http://www.electrictoolbox.com/jquery-clear-form/
Happy coding
快乐编码
