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有一个内置类，用于同一个名为＆＃34; has-error＆＃34;。每当任何字段缺少任何验证时，新类将附加到名为＆＃34; has-error＆＃34;的div中，除输入字段和提交按钮被禁用外，还会向用户显示错误。我想在用户输入金额后为金额字段提供相同的功能。

我正在向我的div添加has-error类，但是如果我点击inint字段之外的任何地方，那么该类就不见了。我不明白这个问题。如果我对附加错误类的理解是错误的，那么请理解我。谢谢！

Answer 1

您正在使用bootstrap验证程序，因为您正在看到此行为。根据您在输入中提供的验证规则，当您的输入无效时，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来添加错误边框，并将该类添加到bootstrap验证器不知道的输入中。希望这会有所帮助。

覆盖Bootstrap has-error类

1 个答案: