我有一个jQuery验证方法的联系表单。当用户点击"重置" - 按钮时,孔接触形式应该进入初始状态。
这是按钮的样子:
<form class="form" method="post" action="" name="contact" id="contact">
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset</button>
</form>
我的&#34; $(文件).ready-function&#34;中的JS-Code是:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").removeClass("has-error");
});
问题:错误文本和输入字段将被删除。但是不要删除红色边框(.has-error)或绿色边框(.has-success)。
我为你创建了一个JSFiddle:
一个按钮清除输入文本,另一个是删除错误消息。 我需要一个按钮来重置(文本,错误消息)和主要问题,来自has- *类的红色边框。
一个Button被声明为type = submit另一个是type = button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
答案 0 :(得分:6)
对于bootstrapvalidator,当通过bootstrap模式
显示表单时,这可能很有用$("#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();
});
答案 1 :(得分:4)
JS更新
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.has-error').removeClass("has-error");
$("#contact").find('.has-success').removeClass("has-success");
$('#contact').find('.form-control-feedback').remove()
});
答案 2 :(得分:1)
@J Santosh的答案对Bootstrap 3很有用。 对于Bootstrap 4,我做了以下更改:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.is-invalid').removeClass("is-invalid");
$("#contact").find('.is-valid').removeClass("is-valid");
$("#contact").find('.invalid-feedback').remove();
$("#contact").find('.valid-feedback').remove();
});
只需更改类名。希望对您有帮助!
答案 3 :(得分:0)
我只需使用输入重置表单[type =&#34; reset&#34;](不需要jQuery)
<form class="form" method="post" action="" name="contact" id="contact">
<input type="reset" class="btn btn-danger btn-lg" />
</form>
答案 4 :(得分:-1)
我为你创建了一个JSFiddle:
一个按钮清除输入文本,另一个是删除错误消息。 我需要一个按钮来重置(文本,错误消息)和主要问题,来自has- *类的红色边框。
一个Button被声明为type = submit另一个是type = button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
此致