[英]jquery validation for select box onchange
我使用select2设计显示/隐藏div
选择框,并使用jquery验证插件进行验证。 这可行,但是当我选择空值(选择一种颜色)时,验证显示成功(绿色),但是如果我单击提交按钮,我会看到红色。
JS:
$(document).ready(function () {
$(".lstColors").change(function () {
$('div.box').hide();
$('div.box.' + $(this).val()).show();
}).change();
$('form').validate({
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function (element, errorClass, validClass) {
if (element.type === "radio") {
this.findByName(element.name).addClass(errorClass).removeClass(validClass);
} else {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
$(element).closest('.form-group').append('<i class="fa icon-plane icon-2x form-control-feedback"></i>')
}
},
unhighlight: function (element, errorClass, validClass) {
if (element.type === "radio") {
this.findByName(element.name).removeClass(errorClass).addClass(validClass);
} else {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
$(element).closest('.form-group').append('<i class="fa icon-plane icon-2x form-control-feedback"></i>');
}
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('form').on('submit', function () {
$(this).addClass('submitted');
});
$("#lstColors").select2({
placeholder: "Select a Color",
triggerChange: true,
allowClear: true,
width: "200px"
}).on('change', function () {
if ($('form').hasClass('submitted')) $('form').valid();
});
});
HTML:
<form>
<div class="form-group">
<label class="control-label" for="firstname">Nome:</label>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="input-group select2-bootstrap-prepend"> <span class="input-group-addon"><i class=" icon-male"></i></span>
<input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="lstColors" class="control-label">Favorite Colors:</label>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="input-group select2-bootstrap-prepend">
<select id="lstColors" class="lstColors required">
<option value=""></option>
<option value="red" selected>Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<div class="red box">test</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
现在,我需要在选择空值(更改时)后显示红色。 如何解决呢?
在ready函数之后添加新的验证方法
$.validator.addMethod("valueNotEquals", function(t, n, r) {
return t != r
}, $.validator.format("Invalid val is supplied."));
验证规则应类似于
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
},
mySelect: {
valueNotEquals: 0
}
},
当然,不要忘了像上面声明的规则那样将name属性添加到您的选择中,+占位符选项的值应该是规则中提供的值(在这种情况下为0)
<select id="lstColors" name="mySelect" class="lstColors required">
<option value="0"></option>
UPDATE我注意到,如果占位符选项的值更改,则占位符消失,因此我搜索了另一种解决方案并找到了一个解决方案:
$(".lstColors").on('select2-removed', function () {
if ($('form').hasClass('submitted')) $('form').valid();
});
签出小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.