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

【问题标题】：Reset Form / remove error classes from jQuery validate重置表单/从 jQuery 验证中删除错误类
【发布时间】：2014-05-30 14:03:38
【问题描述】：

我有一个带有 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 代码是：

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

问题：错误文本和输入字段将被删除。但是红色边框（.has-error）或绿色边框（.has-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>

【问题讨论】：

has-error 类最初是在 #contact 元素上吗？
在验证时分配 has-error / has-success 类：$(element).closest('.form-group').removeClass('has-success').addClass('has -error')
@user3265764 你能创建一个jsfiddle吗？
@user3265764 它将重置表单中的值，但仍会保留红色框的突出显示。

标签： javascript jquery html validation twitter-bootstrap

【解决方案1】：

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

【讨论】：

这就是我正在寻找的答案
谢谢，它适用于 Bootstrap 3，我已经在下面发布了 Bootstrap 4 的答案。

【解决方案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】：

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

只需更改类名。希望对您有所帮助！

【讨论】：

【解决方案4】：

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

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

【讨论】：

是的，没错。但这只会清除输入字段的文本。不是错误文本和错误类 CSS 样式。
@user3265764 好的，我调查了你的小提琴。我不确定您实际上想通过 has-error 和 has-success 类实现什么...一个空白电话号码显示 has-success。你甚至不需要两个取消按钮，只需为 type="reset" 按钮添加 onclick jQuery 事件。有一些更简单的方法来完成整个事情，只需一些默认类和一些 css。也许我有空的时候可以帮助你。
嗨！空电话号码是正确的，因为该字段没有规则/没有要求。为什么是两个按钮？因为演示了不同按钮类型（提交、重置）发生了什么！

【解决方案5】：

我已经为你创建了一个 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>

问候

【讨论】：