[英]Jquery validation not validate multi select box in form
我的頁面上有兩個選擇框(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>
如何為每個()選擇框解決此問題。
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/
您需要做的就是將名稱屬性添加到兩個選擇框中,並將第一個選項設置為無文本且無值
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.