Проблема совместного использования 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 посте |
ну так не работает
|
Цитата:
|
<!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> |
Sav2907,
строка 38 |
Цитата:
|
А можно сообщение вывести снизу?
|
Или сделать чтобы поля не смещались в сторону, при появлении сообщения
<!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> |
Цитата:
<style type="text/css"> label.error { position: absolute; margin-left: 12px; } </style> |
Цитата:
|
В первом поле пишем 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> |
Sav2907,
а где стили? |
<style type="text/css">
label.error { position: absolute; margin-left: 12px; } </style> |
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> |
ну так как я и писал, попробуйте сами
|
Вложений: 1
вот
|
Sav2907,
нет у меня такого ... читайте про css документацию |
рони,
Еще подскажите как сделать регулярное выражение на 4FC12345678. Цифра, две буквы, 8 цифр |
Sav2907,
/^\d\w{2}\d{8}$/ |
рони,
Не работает $.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; }, " Заполните это поле!!!"); |
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; }, " Заполните это поле!!!"); |
рони,
Спасибо |
рони,
нет, если написать 44444444444 ничего не пишет |
Sav2907,
/^\d[A-Z]{2}\d{8}$/ |
рони,
да, это оно, спасибо |
Привет, как заблокировать поле 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> |
Sav2907,
Цитата:
|
Ок, а 1-е разблокировано все остальные заблокированы, после заполнения 1-го, разблокировать 2-е и т.д. ?
|
рони,
?? |
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> |
рони,
Спасибо мастер |
Не работает разблокировка
<!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> |
Sav2907,
[html run][/html] |
Часовой пояс GMT +3, время: 17:11. |