У меня есть два текстовых #inputPh
номер телефона, #inputPh
и адрес электронной почты, #inputEm
. Любой из них является обязательным. Я использую следующие правила:
rules: {
inputPhone: {
required: {depends: function(){
if($("#inputEm").val()=="")//return value based on textbox1 status
return true;
else
return false;
}
},
isNum: true,
minlength: 10,
maxlength: 12
},
inputEmail: {
required: {depends: function(){
if($("#inputPh").val()=="")//return value based on textbox1 status
return true;
else
return false;
}
},
email: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element.addClass('valid').closest('.control-group').removeClass('error').addClass('success');
}
Проверка корректна, но проблема заключается в том, что когда форма отправляется с пустыми полями, оба текстовых поля будут высоколегированы с классом ошибок. Впоследствии, когда я ввожу допустимое значение в одно из текстовых полей, только этот особый поле получает класс успеха, а другой будет иметь класс ошибки, даже если форма может быть отправлена.
Как я могу получить доступ или передать зависимый элемент через функции JQuery Validator?
Вместо этого используйте метод require_from_group
включенный в файл additional-methods.js
. В соответствии с комментариями кода:
/*
* Lets you say "at least X inputs that match selector Y must be filled."
*
* The end result is that neither of these inputs:
*
* <input class="productinfo" name="partnumber">
* <input class="productinfo" name="description">
*
* ...will validate unless at least one of them is filled.
*
* partnumber: {require_from_group: [1,".productinfo"]},
* description: {require_from_group: [1,".productinfo"]}
*
*/
Не будет никаких проблем с классом ошибок, оставшимся в другом поле...
$(document).ready(function() {
$('#myform').validate({
rules: {
inputPhone: {
require_from_group: [1, '.mygroup'],
// isNum: true, // <-- no such rule in this plugin
minlength: 10,
maxlength: 12
},
inputEmail: {
require_from_group: [1, '.mygroup'],
email: true
}
}
});
});
ДЕМО: http://jsfiddle.net/wWjWM/
При желании вы можете использовать параметр groups
чтобы объединить сообщения для обоих полей в одну метку. Однако это может быть нежелательно, поскольку оно также будет применяться ко всем другим правилам в обоих полях.
BTW: В файле additional-methods.js
существуют различные правила телефонных номеров, которые можно использовать вместо minlength
и maxlength
. (в этом плагине нет такого правила, как isNum
. Он называется digits
.)