在模态中使用 jquery 验证器后从表单中重置/删除类答案

【问题标题】：Reset/remove classes from a form after jquery validator use inside modal在模态中使用 jquery 验证器后从表单中重置/删除类
【发布时间】：2013-11-01 17:51:21
【问题描述】：

我基本上是将内容加载到引导模式中，编辑信息并使用 jquery 验证器对其进行验证，然后使用 ajax 请求提交它。到目前为止一切都运行良好，直到我单击另一个仍然出现验证类的项目。我的问题是，有没有办法在关闭引导模式后删除验证器类？请帮忙

【问题讨论】：

标签： javascript jquery ajax validation twitter-bootstrap

【解决方案1】：

有一个resetForm 方法可以用来设置验证器的状态。

// on load of your dialog:
var validator = $('#myForm').validate();
validator.resetForm();

【讨论】：

太棒了！这确实有效。就一件事。一个班级仍然留在表格上。 “成功”类仍在使标签和表单输入变为绿色。有什么想法吗？
我不认为这是由验证器设置的，因此您需要手动删除它：$('.has-success').removeClass('has-success');
好的，太好了！感谢您的帮助。
@MatthewBobrowski 没问题，很高兴为您提供帮助
你认为你能帮我解决这个问题吗？任何想法stackoverflow.com/questions/19536998/…

【解决方案2】：

如果您使用的是 bootstrapvalidator，下面的代码将有助于摆脱错误元素

$("#editModal").on('hidden.bs.modal', function () {

        //Removing the error elements from the from-group
        $('.form-group').removeClass('has-error has-feedback');
        $('.form-group').find('small.help-block').hide();
        $('.form-group').find('i.form-control-feedback').hide();

    });

【讨论】：

【解决方案3】：

对于那些使用 Bootstrap 3 的人（resetForm() 不工作）：

$('.form-group').each(function () { $(this).removeClass('has-success'); });
$('.form-group').each(function () { $(this).removeClass('has-error'); });
$('.form-group').each(function () { $(this).removeClass('has-feedback'); });
$('.help-block').each(function () { $(this).remove(); });
$('.form-control-feedback').each(function () { $(this).remove(); });

如果你像下面这样设置：

highlight: function (element) {
    $(element).closest('.form-group').removeClass('has-success');
    $(element).closest('.form-group').addClass('has-error has-feedback');
    $(element).closest('.form-group').find('span.form-control-feedback').remove();
    //$(element).closest('.input-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
    $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
},

unhighlight: function (element) {
    $(element).closest('.form-group').removeClass('has-error');
    $(element).closest('.form-group').addClass('has-success has-feedback');
    $(element).closest('.form-group').find('span.form-control-feedback').remove();
    //$(element).closest('.input-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
    $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok    form-control-feedback" aria-hidden="true"></span>');
},

errorElement: 'span',
errorClass: 'help-block',

errorPlacement: function (error, element) {
    if (element.parent('.input-group').length) {
        error.insertAfter(element.parent());
    } else {
        error.insertAfter(element);
    }
}

【讨论】：

是解决方案还是问题？

【解决方案4】：

您可以使用隐藏（或隐藏）功能：

$('#myModal').on('hidden', function () {
// do something… removeClass etc.
})

【讨论】：