jQuery验证不验证表单中的多重选择框

Question

我的页面上有两个选择框（dropdpwn）。 我使用jQuery验证插件验证我的表单，但此插件未验证两个选择框。

JS：

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

HTML：

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="lastname">selectBox 1</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
           <select class="required form-control">
               <option value="0"></option>
               <option value="1">1</option>
               <option value="2">2</option>

            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="lastname">selectBox 2</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
           <select class="required form-control">
               <option value="0"></option>
               <option value="1">1</option>
               <option value="2">2</option>

            </select>
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

如何为每个（）选择框解决此问题。

演示： http : //jsfiddle.net/hTPY7/1435

Answer 1

1）每个元素上必须具有唯一的name属性。 这是jQuery Validate插件的要求。

2）第一个option必须具有value=""而不是value="0" 。

工作演示： http ： //jsfiddle.net/hTPY7/1436/

---

3）OP的演示已损坏，因为他两次使用相同的id 。 对于有效的HTML，每个id在页面上必须唯一。

带有ID的DEMO： http ： //jsfiddle.net/hTPY7/1441/

Answer 2

您需要做的就是将名称属性添加到两个选择框中，并将第一个选项设置为无文本且无值

<select name="s1" class="required form-control">
              ^--  Don't forget to add different names for both select
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

的jsfiddle