Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблема совместного использования Masked Input и jQuery Validation (https://javascript.ru/forum/jquery/48848-problema-sovmestnogo-ispolzovaniya-masked-input-i-jquery-validation.html)

spo 19.07.2014 02:55
Проблема совместного использования 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. Но в этом случае, поле всегда будет "невалидно", так как значение поля содержит помимо цифр символы шаблона ("+", "(", ")", "-", " ").

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

spo 19.07.2014 04:59
Цитата:
Сообщение от рони (Сообщение 321765)
spo,
прочитайте документацию на плагин валидации и напишите правило minlengthPhone
Свое правило я написать уже пробовал, правда не совсем успешно.
Правильно ли я понимаю, что мне нужно написать два правила для required и minlength, в которых проверка будет осуществляться после очистки value от лишних символов?

spo 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
}

рони 19.07.2014 09:56
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>

spo 20.07.2014 08:49
рони, большое спасибо!

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

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

Sav2907 31.03.2016 15:10
ну так не работает

рони 31.03.2016 15:48
Цитата:
Сообщение от Sav2907
ну так не работает
где код?

Sav2907 31.03.2016 16:31 
<!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;
    },
    " Заполните это поле!!!");
	
	
$.validator.addMethod("minlenghtname", function (value, element) {
        return value.replace(/\D+/g, '').length > 15;
    },
    " Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
        return value.replace(/\D+/g, '').length > 1;
    },
    " Заполните это поле!!!");

$(function () {
    $("#commentForm").validate({
        rules: {
            phone: {
                requiredphone: true,
                minlenghtphone: true
            }
			name: {
                requiredname: true,
                minlenghtname: 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="left" id="name" name="name"></p>
		<p>
			<input class="submit" type="submit" value="Submit"/>
		</p>
	</fieldset>
</form>


</body>
</html>

рони 31.03.2016 16:33
Sav2907,
строка 38

Sav2907 31.03.2016 16:41
Цитата:
Сообщение от рони (Сообщение 412554)
Sav2907,
строка 38
А, запятую забыл. Спасибо

Sav2907 01.04.2016 10:27
А можно сообщение вывести снизу?

Sav2907 01.04.2016 10:31
Или сделать чтобы поля не смещались в сторону, при появлении сообщения
<!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.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;
    },
    " Заполните это поле!!!");
	
	
$.validator.addMethod("minlenghtname", function (value, element) {
        return value.replace(/\D+/g, '').length > 15;
    },
    " Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
        return value.replace(/\D+/g, '').length > 1;
    },
    " Заполните это поле!!!");

$(function () {
    $("#commentForm").validate({
        rules: {
            phone: {
                requiredphone: true,
                minlenghtphone: true
            },
			name: {
                requiredname: true,
                minlenghtname: true
            }

        }
    })
});
  </script>
</head>
<body>

<center>
<form class="cmxform" id="commentForm" method="get" action="">
	
       <p><input class="left" id="phone" name="phone"></p>
		<p><input class="left" id="name" name="name"></p>
		<p><input class="submit" type="submit" value="Submit"/></p>
	
</form>
</center>

</body>
</html>

рони 01.04.2016 11:02
Цитата:
Сообщение от Sav2907
Или сделать чтобы поля не смещались в сторону, при появлении сообщения
 
<style type="text/css">
  label.error {
    position: absolute;
    margin-left: 12px;
  }

  </style>

Sav2907 01.04.2016 11:11
Цитата:
Сообщение от рони (Сообщение 412666) 
<style type="text/css">
  label.error {
    position: absolute;
    margin-left: 12px;
  }

  </style>
То что нужно, спасибо

Sav2907 01.04.2016 13:58
В первом поле пишем 11 значное число, жмем отправить, потом убираем 2 цифры, отправить, пишем снова 2 и убираем две. Сообщение покажет ниже поля ввода
<!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.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;
    },
    " Заполните это поле!!!");
	
	
$.validator.addMethod("minlenghtname", function (value, element) {
        return value.replace(/\D+/g, '').length > 15;
    },
    " Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
        return value.replace(/\D+/g, '').length > 1;
    },
    " Заполните это поле!!!");

$(function () {
    $("#commentForm").validate({
        rules: {
            phone: {
                requiredphone: true,
                minlenghtphone: true
            },
			name: {
                requiredname: true,
                minlenghtname: true
            }

        }
    })
});
  </script>
</head>
<body>

<center>
<form class="cmxform" id="commentForm" method="get" action="">
	
       <p><input class="left" id="phone" name="phone" maxlength="11"></p>
		<p><input class="left" id="name" name="name" maxlength="14"></p>
		<p><input class="submit" type="submit" value="Submit"/></p>
	
</form>
</center>

</body>
</html>

рони 01.04.2016 14:32
Sav2907,
а где стили?

Sav2907 01.04.2016 14:45
<style type="text/css">
label.error {
position: absolute;
margin-left: 12px;
}

</style>

рони 01.04.2016 14:48
Sav2907,
и? 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
  <style type="text/css">
  label.error {
    position: absolute;
    margin-left: 12px;
  }

  </style>
<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.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;
    },
    " Заполните это поле!!!");


$.validator.addMethod("minlenghtname", function (value, element) {
        return value.replace(/\D+/g, '').length > 15;
    },
    " Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
        return value.replace(/\D+/g, '').length > 1;
    },
    " Заполните это поле!!!");

$(function () {
    $("#commentForm").validate({
        rules: {
            phone: {
                requiredphone: true,
                minlenghtphone: true
            },
			name: {
                requiredname: true,
                minlenghtname: true
            }

        }
    })
});
  </script>
</head>
<body>

<center>
<form class="cmxform" id="commentForm" method="get" action="">

       <p><input class="left" id="phone" name="phone" maxlength="11"></p>
		<p><input class="left" id="name" name="name" maxlength="14"></p>
		<p><input class="submit" type="submit" value="Submit"/></p>

</form>
</center>

</body>
</html>

Sav2907 01.04.2016 14:53
ну так как я и писал, попробуйте сами

Sav2907 01.04.2016 14:54
Вложений: 1
вот

рони 01.04.2016 15:13
Sav2907,
нет у меня такого ... читайте про css документацию

Sav2907 01.04.2016 15:15
рони,
Еще подскажите как сделать регулярное выражение на 4FC12345678. Цифра, две буквы, 8 цифр

рони 01.04.2016 15:19
Sav2907,
/^\d\w{2}\d{8}$/

Sav2907 01.04.2016 15:23
рони,
Не работает
$.validator.addMethod("minlenghtphone", function (value, element) {
        return value.replace(/^\d\w{2}\d{8}$/, '').length > 12;
    },
    " Маловато циферок будет!");
$.validator.addMethod("requiredphone", function (value, element) {
        return value.replace(/^\d\w{2}\d{8}$/, '').length > 1;
    },
    " Заполните это поле!!!");

рони 01.04.2016 15:33
Sav2907,
$.validator.addMethod("format", function (value, element) {
        return /^\d\w{2}\d{8}$/.test(value);
    },
    " не соответствует формату");
$.validator.addMethod("requiredphone", function (value, element) {
        return value.length > 1;
    },
    " Заполните это поле!!!");

Sav2907 01.04.2016 15:41
рони,
Спасибо

Sav2907 01.04.2016 15:51
рони,
нет, если написать 44444444444 ничего не пишет

рони 01.04.2016 16:05
Sav2907,
/^\d[A-Z]{2}\d{8}$/

Sav2907 01.04.2016 16:10
рони,
да, это оно, спасибо

Sav2907 12.04.2016 20:43
Привет, как заблокировать поле name пока не заполнено поле phone, после заполнения phone заблокировать и разблокировать name. Полей может быть больше. Например 5 полей, 1 разблокировано все остальные заблокированы, после заполнения 1-го, разблокировать 2-е и заблокировать 1-е и т.д.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
  <style type="text/css">
  label.error {
    position: absolute;
    margin-left: 12px;
  }

  </style>
<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.addMethod("minlenghtphone", function (value, element) {
        return /^\d[A-Z]{2}\d{8}$/.test(value);
    },
    " не соответствует формату");
$.validator.addMethod("requiredphone", function (value, element) {
        return value.length > 1;
    },
    " Заполните это поле!!!");




$.validator.addMethod("minlenghtname", function (value, element) {
        return value.replace(/\D+/g, '').length > 15;
    },
    " Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
        return value.replace(/\D+/g, '').length > 1;
    },
    " Заполните это поле!!!");

$(function () {
    $("#commentForm").validate({
        rules: {
            phone: {
                requiredphone: true,
                minlenghtphone: true
            },
			name: {
                requiredname: true,
                minlenghtname: true
            }

        }
    })
});
  </script>
</head>
<body>

<center>
<form class="cmxform" id="commentForm" method="get" action="">

       <p><input class="left" id="phone" name="phone" maxlength="11"></p>
		<p><input class="left" id="name" name="name" maxlength="16"></p>
		<p><input class="submit" type="submit" value="Submit"/></p>

</form>
</center>

</body>
</html>

рони 12.04.2016 20:57
Sav2907,
Цитата:
Сообщение от Sav2907
после заполнения phone заблокировать
алгоритм невыполним

Sav2907 12.04.2016 22:08
Ок, а 1-е разблокировано все остальные заблокированы, после заполнения 1-го, разблокировать 2-е и т.д. ?

Sav2907 12.04.2016 23:19
рони,
??

рони 12.04.2016 23:35
validate последовательное заполнение формы
 
Sav2907, строка 52 заполнить по порядку заполнения,
читать документацию и придумывать алгоритмы решения самостоятельно.
http://jqueryvalidation.org/documentation/
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
  <style type="text/css">
  label.error {
    position: absolute;
    margin-left: 12px;
  }

  </style>
<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.addMethod("minlenghtphone", function (value, element) {
        return /^\d[A-Z]{2}\d{8}$/.test(value);
    },
    " не соответствует формату");
$.validator.addMethod("requiredphone", function (value, element) {
        return value.length > 1;
    },
    " Заполните это поле!!!");




$.validator.addMethod("minlenghtname", function (value, element) {
        return value.replace(/\D+/g, '').length > 15;
    },
    " Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
        return value.replace(/\D+/g, '').length > 1;
    },
    " Заполните это поле!!!");

$(function () {
 var validator = $("#commentForm").validate({

        rules: {
            phone: {
                requiredphone: true,
                minlenghtphone: true
            },
            name: {
                requiredname: true,
                minlenghtname: true
            }

        }
    })
var arrId = ["#phone", "#name"];
$.each(arrId, function(indx, id) {
    var next = arrId.slice(++indx);
    if (next.length) {
        next += "";
        var fn = function() {
            validator.element(id) ? $(next).removeAttr("disabled") : $(next).prop("disabled", true)
        };
        $(id).on("input", fn);
        $(next).prop("disabled", true)
    }
});
});
  </script>
</head>
<body>
<p id="summary"></p><center>
<form class="cmxform" id="commentForm" method="get" action="">

       <p><input class="left" id="phone" name="phone" maxlength="11"></p>
        <p><input class="left" id="name" name="name" maxlength="16" ></p>
        <p><input class="submit" type="submit" value="Submit"/></p>

</form>
</center>

</body>
</html>

Sav2907 12.04.2016 23:57
рони,
Спасибо мастер

Sav2907 13.04.2016 13:47
Не работает разблокировка
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />	
		<title>ЗС</title>
		<script src="js/jquery.min.js"></script>
       	<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
		<style>
		body {
		  background: #2f3238
		}
		label.error {
		position: absolute;
		margin-left: 12px;
		color: #fff;
		font-size: 20px;
		}
		</style> 
		<script>
				$.validator.addMethod("min_Part_number", function (value, element) {
						return /^\d[A-Z]{2}\d{10}$/.test(value);
					},
					"Не відповідає формату 3FC3333333333!");
				$.validator.addMethod("required_Part_number", function (value, element) {
						return value.length > 1;
					},
					"Заповніть це поле!");				
					
				$.validator.addMethod("min_Order_number", function (value, element) {
						return /^\d{7}$/.test(value);
					},
					"Не відповідає формату 1234567!");
				$.validator.addMethod("required_Order_number", function (value, element) {
						return value.length > 1;
					},
					"Заповніть це поле!");
				
				$.validator.addMethod("min_Quantity", function (value, element) {
						return value.replace(/\D+/g, '').length > 0;
					},
					"Не відповідає формату 100!");
				$.validator.addMethod("required_Quantity", function (value, element) {
						return value.replace(/\D+/g, '').length > 0;
					},
					"Заповніть це поле!");
					
					$.validator.addMethod("min_Ticket_number", function (value, element) {
						return /^\d{10}$/.test(value);
					},
					"Не відповідає формату 0123456789");
				$.validator.addMethod("required_Ticket_number", function (value, element) {
						return value.length > 1;
					},
					"Заповніть це поле!");

				$(function () {
					$("#forma").validate({
						rules: {
							Part_number: {
								required_Part_number: true,
								min_Part_number: true
							},
							Order_number: {
								required_Order_number: true,
								min_Order_number: true	
							},
							Quantity: {
								required_Quantity: true,
								min_Quantity: true	
							},
							Ticket_number: {
								required_Ticket_number: true,
								min_Ticket_number: true	
							}
						}
					})
					
				var arrId = ["#Part_number", "#Order_number", "#Quantity", "#Ticket_number"];

				$.each(arrId, function(indx, id) {

					var next = arrId.slice(++indx);

					if (next.length) {

						next += "";

						var fn = function() {

							validator.element(id) ? $(next).removeAttr("disabled") : $(next).prop("disabled", true)

						};

						$(id).on("input", fn);

						$(next).prop("disabled", true)

					}

				});
					
				});
				

	    </script>
		<script>
		
		function testJump(x){
			var ml = ~~x.getAttribute('maxlength');
			if(ml && x.value.length >= ml){
			var target;

				do{
					x = x.nextSibling;
				}
				
				while(x && !(/text/.test(x.type)));
				
				if(x && /text/.test(x.type)){
					
					x.focus();
					
				}
			}
					
		}
		</script>
		</head>
		
	<body>	
	     
			
		
	<div style="width: 1000px; margin: auto;">				
		<form name="forma1" method="POST" id="forma" action="add_1.php" onkeypress="if(event.keyCode == 13) return false;">
			
			<center><span style="color: #fff; font-size: 1.5em;">Part number</span><br />
			<input type="text" id="Part_number" name="Part_number" maxlength="13" onkeyup="testJump(this);" style="text-align: center;"/><br />
			
			<span style="color: #fff; font-size: 1.5em;">Order number</span><br />
			<input type="text" id="Order_number" name="Order_number" maxlength="7" onkeyup="testJump(this);" style="text-align: center;"><br />
			
			<span style="color: #fff; font-size: 1.5em;">Quantity</span><br />
			<input type="text" id="Quantity" name="Quantity" onkeyup="testJump(this);" maxlength="3" style="text-align: center;"><br />
			
			<span style="color: #fff; font-size: 1.5em;">Ticket number</span><br />		
			<input type="text" id="Ticket_number" name="Ticket_number" maxlength="10" onkeyup="testJump(this);" style="text-align: center;"><br />
			
					
			
			<center><input type="submit" class="btn" value="Ок"/></center>
			
			
		</form>	
	</div>	
			
	
	</body>				
	</html>

рони 13.04.2016 13:54
Sav2907,
[html run][/html]


Часовой пояс GMT +3, время: 08:23.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице