|
Проблема совместного использования Masked Input и jQuery Validation
Использую совместно два плагина:
Первый плагин использую для задания шаблона для поля "телефонный номер". Формат шаблона и плейсхолдер:
$('#phone_field').mask('+7 (999) 999 - 99 - 99', {
placeholder: '_'
});
В результате в поле отображается шаблон: "+7 (___) ___ - __ - __", с возможностью ввода только цифр. Второй плагин использую для валидации поля с параметром required (обязательное поле) и minlength (минимальное количество символов):
phone: {
required: true,
minlength: 10
}
В параметре maxlength (максимальное количество символов) нет необходимости, так как оно ограничивается шаблоном плагина Masked Input. Очевидно проверку нужно делать по параметру minlength. Однако, при проверке поля плагином jQuery Validation, поле с телефонным номером помечается как "валидное", даже когда не было введено никаких значений. Происходит это, судя по всему, потому что проверке подвергаются так же и сами символы шаблона, которых более чем minlenght: 10. Подскажите пожалуйста, возможно ли както исключить из проверки плагином jQuery Validation символы шаблона? p.s.: Допускается вынос символов "+7" из шаблона. Их можно разместить перед полем. p.p.s.: Так же, есть вариант, использовать параметр digits: true (условием проверки будут только цифры) плагина jQuery Validation. Но в этом случае, поле всегда будет "невалидно", так как значение поля содержит помимо цифр символы шаблона ("+", "(", ")", "-", " "). |
spo,
прочитайте документацию на плагин валидации и напишите правило minlengthPhone |
Цитата:
Правильно ли я понимаю, что мне нужно написать два правила для required и minlength, в которых проверка будет осуществляться после очистки value от лишних символов? |
Не уверен, что решение грамотное, но тем не менее удалось добиться желаемого результата.
$.validator.addMethod("requiredPhone", function(value, element, param) {
value = value.replace('+7 (___) ___ - __ - __');
if ( !this.depend( param, element ) ) {
return "dependency-mismatch";
}
if ( element.nodeName.toLowerCase() === "select" ) {
var val = $( element ).val();
return val && val.length > 0;
}
if ( this.checkable( element ) ) {
return this.getLength( value, element ) > 0;
}
return $.trim( value ).length > 0;
}, "Укажите ваш телефон");
$.validator.addMethod("minlengthPhone", function(value, element, param) {
value = value.replace('+7 (', '');
value = value.replace(') ', '');
value = value.replace(/ - /g, '');
value = value.replace(/_/g, '');
var length = $.isArray( value ) ? value.length : this.getLength( $.trim( value ), element );
return this.optional( element ) || length >= param;
}, "Телефон должен быть не менее {0} символов");
и
phone: {
requiredPhone: true,
minlengthPhone: 10
}
|
spo,
:blink:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function () {
alert("submitted!");
}
});
$.validator.addMethod("minlenghtphone", function (value, element) {
return value.replace(/\D+/g, '').length > 10;
},
" Маловато циферок будет!");
$.validator.addMethod("requiredphone", function (value, element) {
return value.replace(/\D+/g, '').length > 1;
},
" Заполните это поле!!!");
$(function () {
$("#commentForm").validate({
rules: {
phone: {
requiredphone: true,
minlenghtphone: true
}
}
})
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p><input class="left" id="phone" name="phone"></p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
|
рони, большое спасибо!
|
А если несколько полей? Телефон минимум 10 знаков, а Имя 15 знаков?
|
Sav2907,
что мешает добавить свои методы для имени? по образцу в 5 посте |
ну так не работает
|
Цитата:
|
| Часовой пояс GMT +3, время: 22:01. |
|