валидация полей через jquery validation.
Здравствуйте!
Пожалуйста, помогите разобраться с ситуацией. На своем сайте в почтовых формах реализовал валидацию полей через специальный juery плагин jquery validation. В установке плагин оказался достаточно простым, проблем с ним не возникло. Суть плагина заключается в том, что если поле не проходит проверку, то после поля появляется специальный label с классом .error , которому через css я могу задать любые стили. Если же поле проходит валидацию, то label'у присваивается display:none, а input'у присваивается класс .valid . Собственно вопрос заключается в следующем: как присвоить класс .valid не input'у, а еще одному label'у ? заранее спасибо! |
Цитата:
и посмотрите это ... для ошибок ввести 111 <!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
.hide{
display: none;
}
.hide.valid{
display: inline-block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!")
}
});
$.validator.addMethod("test", function(value, element) {
return !/(\d)\1{2,}/.test(value)
}, "Вот эта фигня не прокатит");
$(function() {
$("#commentForm").validate({
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
var name = $(element).data("label");
var lab = $('[for="' + name + '"]');
lab.removeClass("valid")
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
var name = $(element).data("label");
var lab = $('[for="' + name + '"]');
lab.addClass("valid")
},
rules: {
field: {
required: true,
test: true
},
num: {
required: true,
test: true
}
}
})
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p><input class="left" id="num" name="num" data-label="m16"><label for="m16" class="hide" ><input class="left" id="m16" name="m16" value="всё ок в 1 поле"></label></p>
<p><input class="left" id="field" name="field" data-label="m24"><label for="m24" class="hide"><input class="left" id="m24" name="m24" value="всё ок во 2 поле"></label></p>
<p><input class="submit" type="submit" value="Submit"/></p>
</fieldset>
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:40. |