Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2014, 02:55
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Проблема совместного использования Masked Input и jQuery Validation
Использую совместно два плагина:
  1. Masked Input Plugin - digitalbush.com/projects/masked-input-plugin/
  2. jQuery Validation Plugin - jqueryvalidation.org

Первый плагин использую для задания шаблона для поля "телефонный номер".
Формат шаблона и плейсхолдер:
$('#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. Но в этом случае, поле всегда будет "невалидно", так как значение поля содержит помимо цифр символы шаблона ("+", "(", ")", "-", " ").
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2014, 03:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

spo,
прочитайте документацию на плагин валидации и напишите правило minlengthPhone
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2014, 04:59
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Сообщение от рони Посмотреть сообщение
spo,
прочитайте документацию на плагин валидации и напишите правило minlengthPhone
Свое правило я написать уже пробовал, правда не совсем успешно.
Правильно ли я понимаю, что мне нужно написать два правила для required и minlength, в которых проверка будет осуществляться после очистки value от лишних символов?
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2014, 07:27
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Не уверен, что решение грамотное, но тем не менее удалось добиться желаемого результата.

$.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
}
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2014, 09:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

spo,

<!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>

Последний раз редактировалось рони, 19.07.2014 в 10:44.
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2014, 08:49
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

рони, большое спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 31.03.2016, 14:57
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

А если несколько полей? Телефон минимум 10 знаков, а Имя 15 знаков?
Ответить с цитированием
  #8 (permalink)  
Старый 31.03.2016, 15:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sav2907,
что мешает добавить свои методы для имени? по образцу в 5 посте
Ответить с цитированием
  #9 (permalink)  
Старый 31.03.2016, 15:10
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

ну так не работает
Ответить с цитированием
  #10 (permalink)  
Старый 31.03.2016, 15:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Sav2907
ну так не работает
где код?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery datepicker + blockUI в Опере 9.27 проблема позиционирования Dionysius Opera, Safari и др. 6 23.12.2009 16:41
Проблема с jQuery. Beck jQuery 2 26.08.2009 19:08
Проблема при работе с плагином jQuery Map Hilight REp0rtER jQuery 3 29.07.2009 22:10
проблема с JQUERY rod'ka Я не знаю javascript 1 11.06.2009 17:08
jquery tabs (проблема с отображением) Extern Элементы интерфейса 0 16.03.2009 17:42