覆盖 Bootstrap has-error 类

Posted 2023-05-08

【中文标题】覆盖 Bootstrap has-error 类

【英文标题】：Overriding Bootstrap has-error class

【发布时间】：2018-07-14 08:23:04

【问题描述】：

我在 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(?=(\d3)+(?!\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 字段之外的任何位置，该类就消失了。我不明白这个问题。如果我对附加错误类的理解是错误的，请纠正我。谢谢！

【问题讨论】：

你在使用bootstrap validator吗？

是的。我正在使用这个 toggle: 'validator'

【参考方案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 来添加错误边框并将该类添加到引导验证器不会知道的输入中。希望这会有所帮助。

【讨论】：

如果我使用数字字段而不是文本字段，我无法应用逗号。我只是想找到一种方法来通知用户输入字段错误，以某种类似于 Bootstrap 的方式。

@Yesha Ohh..好的。然后，您必须编写一个自定义 css 类并将其添加到输入中，而不是像我提到的 has-error 或向验证器添加自定义验证语句。顺便问一下，您使用的是哪个版本的引导程序？

我使用的是 3.2.0 版另外，你能解释一下“向验证器添加自定义验证语句”是什么意思吗？