Форум

spo · #1 (**permalink**) 19.07.2014, 02:55

Использую совместно два плагина:

Masked Input Plugin - digitalbush.com/projects/masked-input-plugin/
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

spo,
прочитайте документацию на плагин валидации и напишите правило minlengthPhone

spo · #3 (**permalink**) 19.07.2014, 04:59

Сообщение от рони

spo,
прочитайте документацию на плагин валидации и напишите правило minlengthPhone

Свое правило я написать уже пробовал, правда не совсем успешно.
Правильно ли я понимаю, что мне нужно написать два правила для required и minlength, в которых проверка будет осуществляться после очистки value от лишних символов?

spo · #4 (**permalink**) 19.07.2014, 07:27

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

$.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

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>

spo · #6 (**permalink**) 20.07.2014, 08:49

рони, большое спасибо!

Sav2907 · #7 (**permalink**) 31.03.2016, 14:57

А если несколько полей? Телефон минимум 10 знаков, а Имя 15 знаков?

рони · #8 (**permalink**) 31.03.2016, 15:00

Sav2907,
что мешает добавить свои методы для имени? по образцу в 5 посте

Sav2907 · #9 (**permalink**) 31.03.2016, 15:10

ну так не работает

рони · #10 (**permalink**) 31.03.2016, 15:48

Сообщение от Sav2907

ну так не работает

где код?

Форум

Справочник

Discord чат

Курсы javascript