Узнайте как можно легко подключить jQuery для проверки любой html-формы
Если у Вас есть свой сайт, возможности которого позволяют пользователю зарегистрироваться или ввести какие-то данных в форму, будь то интернет-магазин или обычный блог, Вы с легкостью и быстротой можете разобраться в исходном коде примера, который максимально оптимизирован для регистрации пользователя в интерне-магазине.
Скрипт позволяет мгновенно, сразу при вводе проверять данные - количество вводимых символов, соответствие пароля и подтверждения пароля, правильному формату адресу электронной почты, номер телефона. Все это осуществляется при помощи JavaScript.
Основные преимущества jQuery.validate plugin:
• при вводе данных логина, пользователь видеть подсказку о минимальном количестве символов;
• при вводе пароля, выводится сообщение о его мин. кол-ве;
• при несовпадении паролей - выводится соответствующее сообщение;
• при вводе e-mail он сразу же проверяется на правильность ввода, например 123@mail.me
• при вводе номера мобильного телефона, выводится сообщение о мин. кол-ве символов и проверке на макс- и минимальное кол-во.
Разберем код...
$("#signupForm").validate({
- это идентификатор формы:
<form id="signupForm" class="otherform" method="post">
</form>
Условия, для какого for необходима проверка.
rules: {
user_tel: {
required: true,
minlength: 15,
maxlength: 15
},
Проверка совпадения паролей.
user_pass2: {
required: true,
minlength: 5,
equalTo: "#user_pass"
},
Сообщения, для каких for необходимо сообщать ошибку.
messages: {
user_tel:{
required: "Пожалуйста, введите номер телефона формата (000) 123-45-67.",
minlength: "Номер телефона должен быть 15 символов.",
maxlength:"Введите корректный номер телефона (000) 123-45-67."
},
Подсказки.
function info1(elem) {
var in1 = document.getElementById('info1');
var in1 = document.getElementById('info1').style.display='block';
}
function info1close(elem) {
var in1 = document.getElementById('info1');
var in1 = document.getElementById('info1').style.display='none';
}
Активируем кнопку Submit при клике в input поле.
function enableButton(elem) {
var in7 = document.getElementById('mybutton');
var in7 = document.getElementById('mybutton').disabled=false;
}
Разберем пункт формы:
<tr>
<td><label for="user_login">Логин</label></td>
<td><input style="width:175px"onclick="enableButton(this);" onfocus="info1(this);" onblur="info1close(this);" id="user_login" type="text" name="user_login" /></td>
<td><div id="info1">Допускаются только строчные латинчкие символы (a-z) и цифры (0-9).
Нельзя использовать пробел и спецсимволы.</div></td>
</tr>
обязательное условие - for="ID", где ID - это идентификатор input для label
id="info1" - это подсказка, которая активируется при нажатии на input.
Для того, чтобы это все заработало, нам необходим сам framework jQuery и jQuery.validate.js, которые мы подключаем с помощью обычной вставки:
<script src="/jquery.js" type="text/javascript"></script>
<script src="/jquery.validate.js" type="text/javascript"></script>
Если у Вас уже прикреплена библиотека jQuery на странице, то не следует цеплять еще одну.
В общем-то ничего сложно, если у Вас возникнут вопросы, то посмотрите исходный код примера.
Если будут сложности - пишите в комментариях.
