Bootstrap要求验证以选择下拉菜单之一

时间:2019-02-12 15:39:31

标签: javascript jquery html twitter-bootstrap validation

我有这个小提琴(来自我的项目)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();
    }
})

2 个答案:

答案 0 :(得分:2)

您可以使用jQuery Validation Plugin来验证表单,而无需在标签上添加必需,只需添加以下规则即可,例如:

$("#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/

答案 1 :(得分:0)

选择没有值。您应该从选定的选项中获取值,可能是这样的:

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

编辑:

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

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

$(this).find('option:selected').val();是所选下拉菜单的值。因此,您可以在每个语句中进行检查,并可以根据值将var设置为true或false。