从jQuery validate中重置窗体/删除错误类

Reset Form / remove error classes from jQuery validate

本文关键字：删除 错误 窗体 jQuery validate      更新时间：2023-09-26

我有一个带有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函数"中的JS代码是：

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

问题：错误文本和输入字段将被删除。但是红色边框（.has error）或绿色边框（.hes success）不会被删除。

我为您创建了一个JSFiddle：

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

一个按钮是清除输入文本，另一个是删除错误消息。我需要一个按钮来重置（文本，错误消息）和主要问题has-*类的红色边框。

一个按钮被声明为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>

您更新的Fiddle

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

对于引导验证器，当表单通过引导模式显示时，这可能很有用

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

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

只需更改类名即可。希望它能有所帮助！

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

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

我为您创建了一个JSFiddle：

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

一个按钮是清除输入文本，另一个是删除错误消息。我需要一个按钮来重置（文本，错误消息）和主要问题has-*类的红色边框。

一个按钮被声明为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>

问候

相关文章：