我在项目中使用bootstrap select和input mask插件。比我需要使用验证。但是当我使用jqueryvalidation时，selectbox和checkobox以及单选按钮不能很好地工作。仅显示错误标签。我需要选择框边框在出现错误时变为红色，然后在成功时变为绿色。
Checkoboxes未显示错误标签。我怎样才能解决这个问题 ？真的，我搜索了很多答案，但没有什么。
链路
$(".form").validate({
rules: {
ad: "required",
soyad: "required",
adresbasligi: {
required: true,
minlength: 2
},
sifre: {
required: true,
minlength: 6
},
adrs: {
required: true,
minlength: 30
},
cityselect: {
required: true
},
countryselect: {
required: true
},
ceptelefonu: {
required: true,
minlength: 10,
},
tcnoarea: {
required: true,
minlength: 11,
},
eposta: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
highlight: function(element) {
$(element)
.closest('.form-group')
.removeClass('has-success')
.addClass('has-error');
},
unhighlight: function(element) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
messages: {
ad: "Lütfen adınızı giriniz",
soyad: "Lütfen soyadınızı giriniz",
adrs: "Lütfen bir adres giriniz",
sifre: {
required: "Bir şifre belirleyiniz",
minlength: "Şifre 6 karakterden az olamaz"
},
adresbasligi: {
required: "Adres başlığı giriniz",
minlength: "Adres başlığı 2 karakterden az olamaz"
},
ceptelefonu: {
required: "Cep telefonu numaranızı giriniz",
minlength: "Cep telefonu başında 0 olmadan yazılmalıdır"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Email adresi hatalı veya girilmemiş.",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if (firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
//INPUT MASK BURN here
jQuery(function($) {
$.mask.definitions['h'] = '[123456789]';
$("#ceptelefonu").mask("(h99) 999 99 99");
$("#tcnoarea").mask("99999999999");
$("#kkno").mask("9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9", {
placeholder: "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _"
});
$("#ccvNo").mask("9 9 9");
});
//Selectpicker Bootstrap
$('.selectpicker').selectpicker({});.kocInput{
input.error {
border: 1px solid @indirim-color;
}
input.valid {
border: 1px solid @main-green;
}
label.error {
font-size: 12px;
color: #f1414d;
margin-top: -6px;
display: block;
font-weight: normal;
}
}
.citySelect label.error, .countrySelect label.error {
font-size: 12px;
color: #f1414d;
margin-top: 4px;
display: block;
font-weight: normal;
}
.checkboxesError {
border: 1px solid red;
padding: 10px;
background-color: rgba(255, 0, 0, 0.02);
}
.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label {
color: @indirim-color;
}
.has-error .form-control {
border-color: @indirim-color;
}
.has-error {
&::after {
content: "\ea08";
font-family: koctasicons;
color: @indirim-color;
top: 40px;
font-size: 14px;
text-align: right;
float: right;
right: 10px;
position: absolute;
}
}
.has-success {
&::after {
content: "\e91a";
font-family: koctasicons;
color: @main-green;
top: 40px;
font-size: 14px;
text-align: right;
float: right;
right: 10px;
position: absolute;
}
}
.has-success .form-control {
border-color: @main-green;
}
.bootstrap-select.btn-group .dropdown-menu li a span.text {
color: inherit;
margin: 0;
}
.has-success .bootstrap-select .btn-default {
border: 1px solid @main-green;
}
.has-error {
span {
font-size: 12px;
color: @indirim-color;
margin-top: -6px;
display: block;
}
}
.has-success {
span {
display: none;
}
}
.kocInput {
margin: 6px 0;
position: relative;
min-height: 101px;
label {
float: left;
color: @main-color;
}
input {
margin-bottom: 10px;
padding-left: 52px;
height: 50px;
}
hr {
position: absolute;
color: black;
margin: 0;
background-color: #cccccc;
top: 36px;
width: 1px;
left: 41px;
height: 26px;
}
i {
position: absolute;
top: 42px;
left: 15px;
pointer-events: none;
font-size: 15px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<form class="form" action="">
<div class="kocInput form-group">
<label class="control-label" for="ad">Ad*</label>
<i class="icon-user"></i>
<hr>
<input id="ad" name="ad" type="text" class="form-control" placeholder="Ad" required/>
</div>
<div class="kocInput form-group">
<label class="control-label" for="soyad">Soyad*</label>
<i class="icon-user"></i>
<hr>
<input id="soyad" name="soyad" type="text" class="form-control" placeholder="Soyad" required/>
</div>
<div class="kocInput form-group">
<label class="control-label" for="eposta">E-Posta*</label>
<i class="icon-envelope"></i>
<hr>
<input id="eposta" name="eposta" title="E-Posta adresi giriniz" type="email" class="form-control" placeholder="E-Posta adresinizi giriniz" required/>
</div>
<div class="kocInput form-group">
<label class="control-label" for="ceptelefonu">Cep Telefonu*</label>
<i class="icon-mobile"></i>
<hr>
<input autocomplete="off" id="ceptelefonu" name="ceptelefonu" maxlength="10" class="form-control" placeholder="(___) ___ __ __" required/>
</div>
<select id="countryselect" name="countryselect" class="selectpicker" title="Lütfen ilçe seçiniz">
<option>Miğfer Dibi</option>
<option>Mordor</option>
<option>Weathertop</option>
<option>Osgiliath</option>
<option>Isengard</option>
<option>Dol Guldur</option>
<option>Rohan</option>
</select>
<div class="kocInput form-group">
<label class="control-label" for="sifre">Şifre*</label>
<i class="icon-key"></i>
<hr>
<input id="sifre" name="sifre" title="" type="password" maxlength="6" class="form-control" placeholder="Şifrenizi giriniz" required/>
</div>
<i title="Şifreyi Göster ve Gizle" id="eye" class="icon-eye2"></i>
<div class="registerchecks">
<ul>
<li class="checkbox">
<label for="mevzuatcheck">
<div>
<input type="checkbox" id="mevzuatcheck" name="mevzuatcheck">
<span class="cr"><i class="cr-icon icon-check"></i></span>
</div>
<p>yukarıda yer alan iletişim bilgilerime reklam, promosyon, vb. ticari elektronik ileti gönderilmesini, bilgilerimin bu amaçla kullanılmasını, saklanmasını ve Koçtaş’ın gönderime ilişkin hizmet aldığı üçüncü
kişilerle paylaşılmasını, <a href="#" data-toggle="modal" data-target="#mevzuatmodal">mevzuat kapsamındaki haklarım</a> saklı kalmak kaydı ile kabul ediyorum.</p>
</label>
</li>
<li class="checkbox">
<label for="parocheck">
<input type="checkbox" id="parocheck" name="parocheck">
<span class="cr"><i class="cr-icon icon-check"></i></span>
<a href="#" data-toggle="modal" data-target="#parometinmodal">Paro Katılım Metni</a>'ni okudum, onaylıyorum.
</label>
</li>
<li class="checkbox">
<label for="uyelikcheck">
<input type="checkbox" id="uyelikcheck" name="uyelikcheck">
<span class="cr"><i class="cr-icon icon-check"></i></span>
<a href="#" data-toggle="modal" data-target="#uyeliksozlesmesimodal">Üyelik Sözleşmesi</a>'ni okudum, onaylıyorum.
</label>
</li>
<li class="checkbox">
<label for="parovetanicheck">
<div>
<input type="checkbox" id="parovetanicheck" name="parovetanicheck">
<span class="cr"><i class="cr-icon icon-check"></i></span>
</div>
<p>Paro Programı ve Tanı’ya ait diğer markalar kapsamında Tanı A.Ş. için izin vermeyi kabul ediyorum.</p>
</label>
</li>
</ul>
</div>
<input type="submit" value="Validate">
<a href="#" class="btn main-btn">Üye Ol <i class="icon-arrow-right"></i></a>
</form>
请看这里是工作的例子：https://jsfiddle.net/f72grt4u/1/
谢谢。