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

Question

我有这个 fiddle (来 self 的项目)https://jsfiddle.net/autofiddle/cap6g9wq/20/

我想要客户名称和所需的第一个下拉列表。

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

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

我已经像这样进行了测试(认为有更好的方法)，但它不起作用，我想将其连接到 Bootstrap 验证，而不仅仅是使 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();
    }
})

Answer 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.",
    }
});

试试这个 fiddle :https://jsfiddle.net/g5y9ho3x/