覆盖 Bootstrap has-error 类

Question

我在 Rails 中有一个表单，其中有一个名为 Amount 的字段。当用户输入金额时，我在输入字段中插入逗号。下面给出了 HTML 和 Javascript 代码：

<div class='col-sm-12 col-md-4 form-group' id="amount_div">
    <%=f.text_field_without_bootstrap :amount, required:true, class: 'form-control' %>
    <div class="help-block with-errors"></div>
</div>


$('#amount').keyup(function(){
    $(this).val(function(index, value) {
        return value
        .replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
    a = $('#amount').val().replace(/\,/g,'');
    if(a!=""){
        b = parseInt(a);
        console.log(b);
        if(b>100000){
            $("#amount_div").addClass("has-error");
        }
    }
});

现在，问题是，在用户输入金额后，我想检查输入的金额是否大于 100000。如果更大，我想向用户显示此错误并在这种情况下禁用提交按钮。 Bootstrap 有一个名为“has-error”的内置类。每当任何字段缺少任何验证时，都会将一个名为“has-error”的新类附加到 div 中，除了输入字段和提交按钮被禁用时，错误会显示给用户。在用户输入金额后，我希望金额字段具有相同的功能。

我正在将 has-error 类附加到我的 div 中，但是如果我单击数量 inut 字段之外的任何位置，该类就消失了。我不明白这个问题。如果我对附加错误类的理解是错误的，请纠正我。谢谢！

Answer 1

您看到此行为是因为您使用的是引导验证程序。 has-error 是引导验证器添加到 form-group 的默认错误类，当您的输入基于您在输入上提供的验证规则无效时。每次您关注（模糊）输入字段或提交表单时，验证器都会相应地添加或删除错误类。由于您对输入没有任何验证规则，因此引导验证程序将输入视为有效并删除该类。
要解决此问题，您实际上可以在输入上使用 .max 以使验证自动处理引导验证器。因此，只需更改

<%=f.text_field_without_bootstrap :amount, required:true, class: 'form-control' %>

到

<%=f.number_field_without_bootstrap :amount, required:true, class: 'form-control', max: 100000 %>.

或者您可以编写一些自定义 css 来添加错误边框并将该类添加到引导验证器不会知道的输入中。希望这会有所帮助。