javascript - Bootstrap 重置按钮 onclick 保持文本框有效

Question

我在 Bootstrap 文本框和文本区域中使用了下面的代码，并且在最后一个 div 中我使用了按钮类型 =“重置”。但是当我输入无效的商店名称和有效地址并单击重置按钮时，它会重置它并且仅在输入无效的商店名称并单击添加商店然后成功添加新商店。文本框显示绿色背景颜色和正确的符号，即使它是空的。 请帮我。 点击重置按钮后请看下图:

                    <form id="defaultForm" method="post" class="form-horizontal" 
                          data-bv-message="This value is not valid"
                          data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
                          data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
                          data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Shop Name</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" pattern="^[a-zA-Z\s]+$"
                                data-bv-regexp-message="The shop name can consist of alphabetical characters only" name="shopName" placeholder="Shop Name" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop name is required and cannot be empty" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Shop Address</label>
                            <div class="col-xs-4">
                                <textarea id="id_txt_addr" type="text" class="form-control" name="shop_address" placeholder="Shop Address" style="height:100px" maxlength="200" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop address is required and cannot be empty"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-9 col-xs-offset-3">
                                <input type="submit" name="add" class="btn btn-primary"  value="Add Shop">
                                <button type="reset" class="btn btn-default">Reset</button>
                            </div>
                        </div>
                    </form>

Answer 1

单击重置按钮时，删除所有相关的验证类和处理最近表单内的错误消息的元素。这里有一个例子:

$(':reset').on('click', function(){
    var $form = $(this).closest("form");
    $form.find('*').removeClass('has-success has-error glyphicon-ok glyphicon-remove');
    $form.find('.help-block').remove();
});

-DEMO-

现在也许有一个 bootstrap 方法来重置验证，你也许应该检查 bootstrap DOC。