我有一个多重选择框,用户应在其中至少选择2个值。我将jQuery与Bootstrap结合使用。但是我没有任何结果。
我的html表单包含一个多选框。该表格是使用Twitter-Bootstrap设计的。我已经编写了一个jQuery函数来验证表单。我能够成功验证所有其他输入字段。
任何帮助。
的HTML
<form>
<div class="form-group">
<label class="control-label" for="lastname">multiple:</label>
<div class="input-group">
<select data-placeholder="Add Invitees" name="invitees[]" multiple class="chosen-select" tabindex="8">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
jQuery的
$('form').validate({
rules: {
invitees: {
minlength: 2,
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);
}
}
});
使用'invitees[]'
,而不是invitees
看到更新后的代码..检查这个小提琴
$('form').validate({
rules: {
'invitees[]': {
minlength: 2,
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);
}
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句