从jQuery验证重置表单/删除错误类

Question

我有一个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>

我的"$(document).ready-function"中的JS-Code是:

$('#cancel').on('click', function () {
   $("#contact").validate().resetForm();
   $("#contact").removeClass("has-error");
});

问题:错误文本和输入字段将被删除.但不删除红色边框(.has-error)或绿色边框(.has-success).

我为你创建了一个JSFiddle:

http://jsfiddle.net/bBc8c/1/

一个按钮清除输入文本,另一个是删除错误消息.我需要一个按钮来重置(文本,错误消息)和主要问题,来自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>

Answer 1

您更新的小提琴

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

Answer 2

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

    });

Answer 3

我只需使用 input[type="reset"] 即可重置表单（不需要 jQuery）

<form class="form" method="post" action="" name="contact" id="contact">
    <input type="reset" class="btn btn-danger btn-lg" />
</form>