Вернуться на предыдущую страницу

Узнайте как можно легко подключить 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 на странице, то не следует цеплять еще одну.

В общем-то ничего сложно, если у Вас возникнут вопросы, то посмотрите исходный код примера.

Если будут сложности - пишите в комментариях.

jQuery validate

Файлы jQuery validate:

Скачать jQuery validate v1.16.0
Скачать jQuery validate v1.14.0
Скачать jQuery validate v1.10.0