javascript - 覆盖 Bootstrap 有错误类

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。如果大于 100000，我想向用户显示此错误并在这种情况下禁用提交按钮。 Bootstrap 有一个名为“has-error”的内置类。每当任何字段缺少任何验证时，一个名为“has-error”的新类就会附加到 div 中，除了输入字段外，还会向用户显示错误，并且提交按钮会被禁用。我想在用户输入金额后为金额字段提供相同的功能。

我正在将 has-error 类附加到我的 div，但如果我单击 amount inut 字段之外的任何地方，该类就会消失。我不明白这个问题。如果我对附加错误类的理解有误，请指正。谢谢!

Answer 1

您看到此行为是因为您使用的是 Bootstrap 验证器。 has-error 是根据您在输入中提供的验证规则，当您的输入无效时， Bootstrap 验证器添加到您的 form-group 的默认错误类。每次您聚焦(模糊)输入字段或提交表单时，验证器都会相应地添加或删除错误类。由于您对输入没有任何验证规则， Bootstrap 验证器认为输入有效并删除该类。
要修复此行为，您实际上可以在输入上使用 .max使验证自动处理 Bootstrap 验证器。所以只是改变

<%=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 来添加错误边框并将该类添加到 Bootstrap 验证器不会知道的输入中。希望这会有所帮助。