在模态中使用 jquery 验证器后,从表单中重置/删除类
Reset/remove classes from a form after jquery validator use inside modal
我基本上是将内容加载到引导模式中,编辑信息并使用jquery验证器对其进行验证,然后使用ajax请求提交它。到目前为止,一切运行良好,直到我单击验证类仍然出现的另一个项目。我的问题是,有没有办法在关闭引导模式后删除验证器类?请帮忙
您可以使用
resetForm
方法来设置验证器的状态。
// on load of your dialog:
var validator = $('#myForm').validate();
validator.resetForm();
如果您使用的是引导验证器,以下代码将有助于消除错误元素
$("#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();
});
对于那些使用 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);
}
}
您可以使用隐藏(或隐藏)功能:
$('#myModal').on('hidden', function () {
// do something… removeClass etc.
})
相关文章:
- 添加和删除隐藏字段数组中的值,而不提交表单
- Small Javascript从动态表单中删除多个元素的问题
- 根据下拉选择向表单添加和删除输入标记
- 在django表单集中添加/删除表单的Javascript
- 单击时从表单中删除特定文本
- 引导表单动态添加带有字段的删除表单
- AngularJS不会从对象中删除表单
- Jquery脚本删除表单中的所有项目'的收藏
- 在表单中填写所有必填字段后删除禁用项
- 使用javascript删除特定的表单元素
- 删除带有按钮的输入表单失败
- 单击单选按钮,添加/删除表单元素的类
- 单击删除时,从表中删除与选定复选框相对应的行
- 删除html表单的确认
- 重置表单后未删除验证消息
- Chained或Dependent选择Zend_Form jQuery以删除或替换表单元素
- AngularJS和Symfony2表单或如何删除表单's”;动作“;属性
- 如何使用javascript删除项目和清除表单
- 当我以带有编辑和删除按钮的表单提交时,显示所有值
- 动态表单泛化和使用流星和Aldeed的自动表单删除