javascript – 覆盖Bootstrap has-error类

2023年12月5日 326次阅读

我在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,除了输入字段之外,向用户显示错误并且提交按钮被禁用.我想在用户输入金额后为金额字段提供相同的功能.

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

最佳答案 您正在使用bootstrap验证程序,因为您正在看到此行为. has-error是根据您在输入中提供的验证规则,当输入无效时,bootstrap验证程序向表单组添加的默认错误类.每次聚焦(模糊)输入字段或提交表单时,验证程序都会相应地添加或删除错误类.由于您对输入没有任何验证规则,因此引导验证程序会将输入视为有效并删除该类.要修复此行为,您实际上可以使用输入上的.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验证器不会注意到的输入中.希望这可以帮助.

点赞