Bootstrap 需要验证才能选择下拉列表之一

Posted 2023-05-08

【中文标题】Bootstrap 需要验证才能选择下拉列表之一

【英文标题】：Bootstrap required validation to select one of the dropdown

【发布时间】：2019-07-06 07:32:04

【问题描述】：

我有这个小提琴（来自我的项目）https://jsfiddle.net/autofiddle/cap6g9wq/20/

我想要客户名称和第一个下拉菜单。

根据您在第一个下拉菜单中选择的内容，会显示另一个带有数字的下拉菜单。

如果所有下拉列表都为 0，我想在单击按钮时验证错误（显示 div id = "quantity-zero"）。如果任何下拉列表大于 0，则验证正常。

我已经像这样进行了测试（认为有更好的方法），但它不起作用，我想将它连接到引导验证，而不只是让 div 在下面的循环中可见。

var totalQuantity = 0;

$(".quantity-select").each(function () 
    if(parseInt($(this).val()) === 0) 
        //display the bootstrap error.
        //don't want it like this: $( "#quantity-zero" ).show();
    
)

【参考方案1】：

您可以使用jQuery Validation Plugin 来验证您的表单，您不需要在标签上添加required，只需添加一些类似以下代码的规则即可：

$("#order-form").validate(
    rules: 
        customerName: "required",
        caseSelect: "required",
    ,
    messages: 
        customerName: "Please enter a customer namn.",
        caseSelect: "You need to select a quantity for your case.",
    
);

试试这个小提琴：https://jsfiddle.net/g5y9ho3x/

【讨论】：

如果您在第一个下拉列表中选择案例 2 并让第二个新的可见下拉列表仍然为零，您不会收到任何验证错误。当你点击按钮时。

【参考方案2】：

选择没有值。您应该从所选选项中获取值，可能是这样的：

$(".quantity-select option:selected").val();

编辑：

如果要检查所有可见的下拉菜单，可以使用以下代码：

$('.quantity-select:visible').each(function()
    $(this).find('option:selected').val();
);

$(this).find('option:selected').val(); 是所选下拉列表的值。因此，您可以检查每个语句，并可能根据值将 var 设置为 true 或 false。

【讨论】：

好的，谢谢，但我真正的问题是将所有数字下拉列表都连接到本机引导验证。需要 3 个下拉列表之一，或超过 0 个。如果不是，我希望引导验证失败。

@Xtreme 我不明白这个问题？为什么所有下拉列表的值都> 0？因为根据案例选择显示了一个下拉列表对吗？

如果两个可见下拉列表之一多于一个，我已更新jsfiddle.net/autofiddle/cap6g9wq/23 验证通过。如果两个可见下拉列表 i 0 验证失败。我只是用一个来使它简单。我有时有不止一个可见的下拉菜单，并且至少有一个可见的需要不止一个才能通过验证。

@Xtreme 查看更新后的答案。也许这可以帮助您朝着正确的方向前进。