От автора: в этом уроке мы вновь коснемся такой темы, как юзабилити, которую мы уже затрагивали в ряде предыдущих уроков. Сейчас мы реализуем такую вещь, как проверка электронного адреса, который ввел пользователь (email), «на лету», т.е. без отправки данных на сервер, а непосредственно на стороне клиента. Это будет не только удобно, но еще и придаст странице большей эффектности. Кроме того, таким образом, снимается лишняя нагрузка на сайт — ведь не посылаются лишние запросы на сервер.
Реализовывать поставленную задачу мы будем при помощи 2-х средств:
Языка регулярных выражений, при помощи которого мы как раз и будем проверять то, что вводит пользователь на соответствие шаблону e-mail;
Фреймворка jQuery, который и будет показывать «на лету» результат проверки (валидации) электронного адреса.
Шаг 1. Формирование задач.
Собственно, такую штуку, я думаю, Вы уже не раз видели на всевозможных сайтах. Есть поле для ввода e-mail, когда Вы вводите адрес почты в это поле и затем переходите к другому полю, рядом с полем e-mail выводится сообщение в каком-либо виде о том, что такой e-mail подходит или не подходит. Иногда такое сообщение появляется совсем уж «на лету», т.е, как только Вы начинаете вводить символы с клавиатуры — эти символы сразу же начинают проверяться на соответствие шаблону. Я покажу, как реализовывается оба варианта, а какой выбрать — решать уж Вам. Итак, приступим.
Прежде всего, создадим обычную страницу HTML с несколькими правилами стилей и небольшой формой:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.ok{
border: 1px solid green;
}
.error{
border: 1px solid red;
}
</style>
<title>Валидация поля E-mail</title>
</head>
<body>
<form>
<p>E-mail: <input type="text" name="mail" id="mail" /> <span id="valid"></span></p>
<p><input type="submit" name="submit" id="submit" value="Отправить" /></p>
</form>
</body>
</html>
Давайте немного разберем структуру документа. Прежде всего, мы имеем 2 правила CSS:
<style type="text/css">
.ok{
border: 1px solid green;
}
.error{
border: 1px solid red;
}
</style>
Класс "ok" будет использован для выделения поля в том случае, когда нас устраивает введенный пользователем e-mail — поле будет обведено зеленой рамкой толщиной в 1 пиксель. Класс "error" будет использован для выделения поля в том случае, когда нас не устраивает содержимое поля e-mail — поле будет обведено красной рамкой толщиной в 1 пиксель.
В форме есть собственно поле для ввода e-mail, блок span с идентификатором "valid", в который будет выводиться сообщение с результатами валидации и также имеется кнопка, которую мы сделаем изначально неактивной и будем активировать только в том случае, если введенный e-mail нас устраивает. Для того, чтобы деактивировать кнопку — добавим ей атрибут "disabled":
<p><input type="submit" name="submit" id="submit" value="Отправить" disabled /></p>
Шаг 2. Составляем регулярное выражение.
Теперь немного поговорим о валидации поля e-mail, т.е., проверке того, что нам прислал пользователь, на соответствие с неким шаблоном. Любой почтовый адрес имеет некий формат… к примеру, такой — «name@mail.ru». Т.е., здесь присутствуют 3 части, разделенные между собой знаком собаки — «@» — и точкой — «.». Вот этот вот образец и будет нашим шаблоном, на соответствие с которым мы будем проверять то, что получим от пользователя в качестве почтового адреса. Если полученное будет соответствовать шаблону — пропускаем такой e-mail, если нет, то — нет. Проверить на 100% свой ли e-mail ввел пользователь при помощи шаблона мы, конечно же, не сможем — это не возможно в принципе, поскольку пользователь может ввести строку внешне похожую на формат электронного адреса, например тот же name@mail.ru. Формат соответствует шаблону, но это совсем не значит, что такая почта существует или, если существует, зарегистрирована на пользователя, заполняющего в данный момент форму. Поэтому 100% проверкой является только отправка на введенный e-mail письма с ссылкой для подтверждения введенного почтового адреса. Но для предотвращения случая, когда в поле e-mail вводится просто набор символов, нам понадобится именно сравнение введенного с шаблоном.
Для того чтобы проверить соответствие чего-то с установленным шаблоном, используются регулярные выражения. В принципе, задача регулярных выражений состоит в том, чтобы находить (или не находить) совпадения строки или ее части с установленным шаблоном. Регулярные выражения — это, скажем так, мини-язык, который используется во многих языках программирования (JavaScript, PHP, Perl и др). Если Вы заинтересуетесь регулярными выражениями, то в сети можно найти довольно много статей о них. Если же это не так интересно будет Вам, то также можно найти в сети уже готовые регулярные выражения под конкретные нужды. Я Вам для этих целей могу порекомендовать сайт с уже готовыми регулярками для валидации e-mail, даты, времени, URL и другого (http://regexlib.com/DisplayPatterns.aspx). В дополнительных материалах Вы также найдете своеобразную шпаргалку по регулярным выражениям.
Регулярные выражения — это очень мощное средство проверок, но желательно их использовать только там, где без них действительно не обойтись.
Итак, используя шпаргалку из дополнительных материалов, составим наш шаблон (регулярное выражение). В уже открытой конструкции JavaScript пропишем стандартный код jQuery, который «скажет», что весь код, заключенный в нем, будет выполняться после загрузки документа (рекомендую Вам ознакомиться с моими предыдущими уроками, в которых затрагивалась тема работы с фреймворком jQuery, и в которых я рассказывал об основах работы с ним):
$(document).ready(function(){});
Внутри операторных (фигурных) скобок мы и будем писать весь наш код. Создадим переменную pattern, в которой и будет храниться шаблон:
$(document).ready(function(){
var pattern = //;
});
Регулярное выражение пишется между двумя слешами, которые мы указали в переменной pattern. Теперь необходимо указать, что на соответствие шаблону будет проверяться вся строка от первого до последнего символа (поскольку часто ищут, допустим, символ/группу символов в тексте), т.е., вся введенная строка должна соответствовать формату электронной почты. Символом (или якорем — см. шпаргалку) начала строки есть "^", а конца строки — "$":
$(document).ready(function(){
var pattern = /^$/;
});
Далее в адресе имеем 3 диапазона ("name", "mail" и "ru"), которые можно задать при помощи квадратных скобок:
$(document).ready(function(){
var pattern = /^[][][]$/;
});
Первый и второй диапазоны разделены знаком собаки — «@» — второй и третий — точкой. Укажем эти символы:
$(document).ready(function(){
var pattern = /^[]@[].[]$/;
});
Но в шпаргалке видим, что точка — это один из символов (мета-символы), которые должны быть экранированы, а экранируются символы точно также, как и в PHP, в JavaScript — при помощи обратного слеша:
$(document).ready(function(){
var pattern = /^[]@[]\.[]$/;
});
Далее, количество символов в первом и втором диапазане должно быть как минимум 1. Максимум мы устанавливать не будем. Вновь заглянем в шпаргалку и видим, что здесь нам на помощь могут прийти кванторы, а именно — знак плюса, который обозначает 1 или больше символов, но не меньше 1:
$(document).ready(function(){
var pattern = /^[]+@[]+\.[]$/;
});
Знак плюса мы хотим использовать именно как квантор, т.е., как специальный символ, а потому мы его, конечно же, ни в коем разе не экранируем. В третьем диапазоне мы укажем минимум и максимум символов. Минимум — 2 символа, максимум — 6. Делается это опять же при помощи кванторов, которые представлены в виде операторных скобок:
$(document).ready(function(){
var pattern = /^[]+@[]+\.[]{2,6}$/;
});
Теперь мы должны указать, какие именно символы мы разрешаем использовать в каждом из диапазонов. Конечно же, в каждом будут разрешены все латинские буквы — как большие, так и маленькие. Для того, чтобы не указывать в диапазоне и большие, и маленькие буквы мы при помощи модификатора "i" укажем, что наш шаблон будет регистронезависимым:
$(document).ready(function(){
var pattern = /^[a-z]+@[a-z]+\.[a-z]{2,6}$/i;
});
Итак, мы указали в каждой из трех частей диапазон [a-z] и указали, что шаблон не будет зависеть от регистра. Теперь давайте разрешим для первой и второй части цифры:
$(document).ready(function(){
var pattern = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,6}$/i;
});
В принципе, наш шаблон уже готов. Добавим в него еще некоторые символы, например тире и нижнее подчеркивание ("-", "_"):
$(document).ready(function(){
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
});
Вот так вот пошагово мы составили простую регулярку, при помощи которой можем проверять действительно ли в поле введено что-то, соответствующее составленному шаблону. Чуть позже мы внесем в нее еще некоторые изменения.
Шаг 3. Пишем функционал jQuery.
Как уже говорилось, советую Вам ознакомиться с моими предыдущими уроками, в которых я рассказывал об основах работы с фреймворком jQuery. В нескольких словах можно сказать, что работа с jQuery состоит из 3-х этапов:
1. Отбор элементов и формирование «набора jQuery» (выборки);
2. Отслеживание событий, которые происходят с отобранными элементами;
3. Реакция на событие.
Элементами, которые мы будем отбирать, являются поле для ввода e-mail, поле для вывода сообщений с результатами валидации и кнопка «Отправить». Теперь о событии, точнее событиях, которые мы будем отслеживать. Как уже отмечалось, мы будем реализовывать 2 варианта:
проверять введенное после ввода и перехода к следующему элементу страницы, т.е., после того, как пользователь уйдет из поля для ввода e-mail и оно, соответственно, потеряет фокус;
проверять на соответствие после каждого введенного символа.
Начнем с первого варианта. За него отвечает событие «blur», которым мы и воспользуемся — это событие наступает в тот момент, когда элемент теряет фокус, т.е., в нашем случае, когда пользователь уйдет из поля e-mail.
А на третьем этапе мы будем реагировать на событие, связанное с отобранным элементом, а именно, когда произойдет событие blur относительно поля e-mail, мы проверим значение поля (т.е., строка, которую ввел пользователь) на соответствие шаблону и, если все хорошо, то выведем соответствующее сообщение и активируем кнопку, в противном случае — выведем сообщение о том, что такой e-mail нам не подходит и деактивируем кнопку, если она активна. Все просто.
Отберем элемент с идентификатором mail (это и будет нужное нам поле) и поместим его в переменную mail, поскольку мы будем обращаться к этому элементу еще не раз:
$(document).ready(function(){
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $('#mail');
});
Как уже отмечалось в предыдущих уроках, для того, чтобы знать как происходит отбор элементов в jQuery — достаточно знаний CSS. Далее мы отслеживаем событие потери фокуса с относительно отобранного элемента и, когда такое событие наступит — выполним анонимную функцию:
$(document).ready(function(){
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $('#mail');
mail.blur(function(){
});
});
Внутри функции мы и будем писать код. Прежде чем проверять введенное пользователем на соответствие шаблону, мы должны проверить ввел ли пользователь вообще что-то, ведь может так статься, что пользователь поместит курсор в поле, а затем просто выйдет из поля — событие blur произойдет, но в поле ничего не введено. Проверить это мы можем по условию: если не пусто значение поля — будем выполнять нужный нам код, иначе — выведем сообщение, что поле e-mail пусто:
$(document).ready(function(){
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $('#mail');
mail.blur(function(){
if(mail.val() != ''){
}else{
$('#valid').text('Поле e-mail не должно быть пустым!');
}
});
});
В блоке иначе (else) мы отобрали в набор элемент с идентификатором "valid" (помним, что это span, в который выводим сообщения о валидации). Затем при помощи метода text мы добавляем в этот элемент текст "Поле e-mail не должно быть пустым!". Теперь мы можем даже протестировать то, что имеем на данный момент. Сохраним файл, обновим страницу и попробуем стать в поле e-mail (оно получает фокус), а затем просто уйти из него… Выводится нужное сообщение.
Замечательно! Идем дальше.
Мы также планировали добавлять полю класс "error", если что-то не так… это как раз один из таких случаев. Добавить класс элементу можно с помощью метода addClass():
$(document).ready(function(){
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $('#mail');
mail.blur(function(){
if(mail.val() != ''){
}else{
$('#valid').text('Поле e-mail не должно быть пустым!');
mail.addClass('error');
}
});
});
Переходим к блоку кода, когда условие выполняется, т.е., значение поля e-mail не является пустым. Здесь мы также должны использовать конструкцию условия. Условие будет таким: если совпадение найдено — добавляем класс "ok", активируем кнопку и выводим соответствующее сообщение… иначе — добавляем класс "error", деактивируем кнопку и выводим соответствующее сообщение. Проверить строку на соответствие шаблону нам поможет метод search(), параметром которого и будет созданная нами регулярка. Метод возвращает числовое значение, которое обозначает позицию первого найденного совпадения с регулярным выражением. Поскольку мы ищем с самого начала строки, т.е., с нулевого элемента, то в случае успеха — метод вернет ноль (т.е., совпадение найдено с начала строки). Если же совпадений нет, то метод вернет значение "-1" (минус единица).
Таким образом, в условии мы просто проверим, вернет ли метод search() ноль, если вернет — ok, иначе — error. Ну а разблокировать уже заблокированную кнопку мы сможем, воспользовавшись методом attr(), при помощи которого мы установим атрибут "disabled" в положение false, т.е., как бы деактивируем сам этот атрибут (в блоке иначе мы наоборот будем активировать этот атрибут, используя значение TRUE):
$(document).ready(function(){
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $('#mail');
mail.blur(function(){
if(mail.val() != ''){
if(mail.val().search(pattern) == 0){
$('#valid').text('Подходит');
$('#submit').attr('disabled', false);
}else{
$('#valid').text('Не подходит');
$('#submit').attr('disabled', true);
}
}else{
$('#valid').text('Поле e-mail не должно быть пустым!');
mail.addClass('error');
}
});
});
Также добавим класс "error", если e-mail не подходит и класс "ok", если адрес подходит. При этом не забываем удалять класс "error", если e-mail подходит, поскольку такой класс может быть установлен ранее — сделать это может метод removeClass(). Ну и не забудем деактивировать кнопку, если поле осталось пустым:
$(document).ready(function(){
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $('#mail');
mail.blur(function(){
if(mail.val() != ''){
if(mail.val().search(pattern) == 0){
$('#valid').text('Подходит');
$('#submit').attr('disabled', false);
mail.removeClass('error').addClass('ok');
}else{
$('#valid').text('Не подходит');
$('#submit').attr('disabled', true);
mail.addClass('ok');
}
}else{
$('#valid').text('Поле e-mail не должно быть пустым!');
mail.addClass('error');
$('#submit').attr('disabled', true);
}
});
});
Шаг 4. Модифицируем регулярное выражение.
Последнее, что мы сделаем — это немного изменим шаблон. Зачем, спросите Вы? Дело в том, что данный шаблон не пропустит некоторую, сравнительно небольшую, долю адресов e-mail… это адреса доменов третьего уровня. Например, возьмем условный сайт — site.net.ua. Почта такого сайта, соответственно, может выглядеть так: mail@site.net.ua — такой e-mail наш шаблон не пропустит. Дополним немного шаблон и добавим в него еще 1 необязательную группу символов. Помочь в этом нам сможет квантор «?», который говорит, что символ (или группа символов, как в нашем случае) необязателен, но, если он встретится, то только 1 раз — не более. Так как мы должны учесть, что в группе будут находиться некие символы и точка, то мы должны объединить эти символы с точкой в группу — здесь нам пригодиться диапазон группы — (…).
После небольшого дополнения регулярка примет следующий вид:
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.([a-z]{1,6}\.)?[a-z]{2,6}$/i;
Заключение.
Теперь все отлично.
Мы реализовали все те задачи, которые планировали в самом начале. В конце хотелось бы сказать несколько слов о том, что не следует забывать, что написанный код служит исключительно для улучшения юзабилити создаваемого веб-интерфейса и никогда не стоит забывать, что клиентские данные ВСЕГДА нужно проверять на стороне сервера. На этом урок закончен.
Ваши вопросы и отзывы жду в комментариях
С уважением Андрей Кудлай
Автор: Кудлай Андрей
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Регулярные выражения очень полезная вещь, спасибо за статью.
Вопрос: .рф — не поддерживается?
Домены 3-го уровня может образовать любой домен 2-го уровня, а в примере ([a-z]{1,6}\.)
не хватает 0-9 и — , да и {1,6} видимо лишнее
или я неправ?
По поводу кириллических доменов, то, на мой взгляд, лучше пока что воздержаться от работы с ними — это все пока что еще очень сыро работает. Но регулярку можно подправить для работы с кириллицей, для этого достаточно добавить в нужные группы диапазон «а-я», т.е., к примеру, так: [a-zа-я]
… правильно, тогда можно будет поставить только 1 литеру, соответственно, понадобится другой соответствующий квантор 
«…в примере ([a-z]{1,6}\.) не хватает 0-9 и – , да и {1,6} видимо лишнее…»
в комментарии выше указал, что целью урока не было изучение стандартов RFC, а потому я просто взял типовой e-mail и написал под него регулярку… Вы же можете ее переписать под свои нужды, о чем и говорилось в уроке. По второй части — {1,6} мы указали, что в этой группе может быть от 1 до 6 символов… в принципе, здесь больше нас интересует ограничение максимума… поэтому не думаю, что это лишнее. Вообще, можно убрать этот квантор и посмотреть, что будет
Про регулярки хорошо разжевал, спасибо за шпаргалку.
Адрес вида не пройдет.
Это очевидно. Мы ведь не разрешаем точки в первой группе. Мы явно указали то, что мы там разрешаем, если нужно разрешить еще что-либо — пожалуйста, все в руках Ваших… в принципе, я об этом и говорил в видео.
Вообще, целью урока не являлось изучение стандартов RFC и поиск с дальнейшим составлением регулярки всех возможных почтовых адресов. Цель урока, напомню, показать как можно валидировать e-mail без обращения к серверу. Как вспомогательное средство, была затронута тема регулярных выражений, которые я пытался объяснить максимально доступно. Дальше — дело за Вами.
ты крут! давай еще!
В конце шага 3 в коде на строке 14 ошибка: mail.addClass(‘ok’);
а надо mail.addClass(‘error’);
Поправьте если я не прав.
А может вообще лучше так:
mail.removeClass(‘ok’).addClass(‘error’);
Да, конечно же, это я видать на автомате вставил и забыл изменить при написании текстовой версии урока (но в исходниках все без ошибок) …в блоке else (если e-mail не подходит) необходимо добавлять класс error. Спасибо за поправку
По второй части вопроса «А может вообще лучше так: mail.removeClass(‘ok’).addClass(‘error’);»
Можно и так
Всегда рад.
Вам спасибо за урок. Для меня очень полезным оказалось разжевывание регулярных выражений
Просто ради интереса. Кому же не понравился камент? Вроде по делу всё.
Не стоит обращать внимания — люди разные бывают… или может кто-то просто тренировался нажимать на красные ручки
Я не могу уменьшить фото для Твиттера. Если можно научите как…
тихий звук урока, на ноуте слушать не комфортно …
Не стоит благодарности
По вопросу: у меня все ок со звуком… да и другие, вроде бы, не жалуются.
согласен, вы же уроки для себя пишете, поэтому не стоит перейматься …
У меня со звуком также все в порядке.
ну и кому это интересно ? я же не спрашивал у кого в порядке, а у кого не в порядке…, я написал, что у меня урок звучит тихо, а дальше желание автора, записывать уроки в будущем так же или повысить громкость …
Мы поняли Вашу мысль. Спасибо.
Норм, спасибо за очередной полезный урок. Попробую теперь это реализовать у себя. Спасибо.
Спасибо буду пробывать
Классно!
Уже опробовал этот шаблон. Сделал по аналогии, всё получилось. Хороший урок. Спасибо!
Перешел на страницу с демкой , в Opera 11 не работает ! Хотя js в браузере разрешен . Или это span блоки с ошибками не отображаются ,для span class-a valid тоже css нужен ?
В демо все кроссбраузерно… работает корректно даже в IE6… возможно, забыли после введения e-mail кликнуть вне поля (напоминаю, что в демо валидация происходит только по событию потери фокуса полем для e-mail’a)?
По поводу: «Или это span блоки с ошибками не отображаются ,для span class-a valid тоже css нужен ?»… не понял вопроса… может, если он четче будет сформулирован — попробую дать ответ.
Хорошо,понятно. Спасибо. Очень полезно.
нужно опробовать
Даже при легком прикасании к уроку стало кое-что понятно
Некоторое время думал, где подвох, и искал употребление переменной pattern в коде. Потом нашел фразу:
«Проверить строку на соответствие шаблону нам поможет метод search(), параметром которого и будет созданная нами регулярка.»
Собственно search() в коде вызывается без параметра, тогда как передаваться туда должен pattern, по идее.
Нет подвоха, просто при написании текстовой версии урока «сгубил» копипаст, когда копируешь участки кода из описания выше
Конечно же, в search() должен передаваться шаблон регулярки. Спасибо за наблюдательность, поправили
Собственно, в исходниках к уроку все правильно и работает, ну и в видео также все ок.
Hi. В первой части регулярки, imho, нужно так
/^[a-z0-9_-.]+@, то есть добавляем точку. Ибо e-mail бывают и такие
Здравствуйте.
Уже отмечал, что целью урока не было изучение стандартов RFC, а потому я просто взял типовой e-mail и написал под него регулярку.
Ну а Вы уже можете модернизировать ее так, как считаете нужным.
Кстати, вот так вот — /^[a-z0-9_-.]+@ — совсем неверно и работать не будет
/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/i
/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/i
Ну и я собственно, просто про точку напомнил =)
Понял
Так уже будет работать… только немного точнее будет так:
/^[+a-z0-9_.-]+@[a-z0-9.-]+\.[a-z]{2,6}$/i
большие буквы лишние, поскольку модификатор регистронезависимости указан.
По поводу бага с «автоподставлением» при keyup.
При просмотре урока, пришла мысль, сразу же скачал исходник и попробовал! Если продублировать в коде скрипта наши функции, «mail.keyup» а после еще раз все тоже самое но уже с «blur», то при подставление емейла, он пройдет валидацию и кнопка активируется после расфокусировки (то есть во всех остальных случаях будет работать c «keyup», а при подставление сработает с «blur»)
P.S. Причем, если сначала написать с «Blur» а потом с «Keyup», то не сработает =/
P.P.S. Мне стало интересно, возможно ли начать проходить валидацию только после первого входа, так как в какой то мере не правильно подсвечивать поле красным при первом же клике на него, еще до тех пор как что либо ввел
Дмитрий, честно говоря, на словах сложно уловить Вашу мысль. Создайте тему на нашем , выложите код и тогда можно будет его обсудить.
Лень регистрироваться на форуме, да и лучше разместить код под уроком…
Приблизительно:
$(document).ready(function(){ var pattern =…; var mail =…;
mail.keyup(function(){ код проверки });
mail.blur(function(){ код проверки});
});
Тогда баг с «keyup» о котором вы говорили в видео-уроке можно будет обойти
спасибо, зачетно, но вопрос как реализовать отправку формы на нужный имейл.
На сайте совсем недавно был опубликован на эту тему.
За идею спасибо, но хочу отметить, что в скрипте допущены ошибки, пришлось допиливать.
Вот рабочий вариант:
var pattern = /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
var mail = $(«input[name='email']«);
mail.blur(function(){
if(mail.val() != »){
if(mail.val().search(pattern) == -1){
$(«input[type='submit']«).attr(‘disabled’, true);
mail.removeClass(‘ok’).addClass(‘error’);
}else{
alert(‘OK’);
$(«input[type='submit']«).attr(‘disabled’, false);
mail.removeClass(‘error’).addClass(‘ok’);
}
}else{
mail.addClass(‘error’);
$(«input[type='submit']«).attr(‘disabled’, true);
}
});
Пожалуйста.
Однако отмечу, что в скрипте ошибок нет, поскольку это тот же скрипт, что создавался шаг за шагом в видео… там он работал без каких-либо ошибок. Да и Демо к уроку, насколько я вижу, работает исправно. Да и в комментариях к уроку у многих все получилось. Или Вы о каких-то других ошибках?
Спасибо за урок,сегодня как раз искал,как сделать регулярные выражения.А у вас нет туториалов по получению определенной части сайта (например ссылку с классом groupAdmin),которая в последствии обрабатывается?
Пожалуйста.
Ну и на форуме можете описать конкретнее задачу и постараемся помочь.
Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег «form», что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре Валидация произвольных форм и контейнеров на jQuery (ida-freewares.ru/validatsiya-polej-proizvolnykh-form-i-kontejnerov-na-jquery.html)
Ящик типа через дефис валидацию не проходит.
Посмотрел Ваш урок по рекомендации в ответе из урока «Создание привлекательной формы. Часть 4″. Большое спасибо!:)
Скажите, пожалуйста, как выполнить эту же поверку на пустоту поля и при клике на submit? То есть submit не блокировать, а выполнять клик по нему и также выводить уведомления о не заполненных полях.
Не совсем понял суть вопроса… мы ведь реализовали проверку на заполнение обязательных полей.
Да реализовали, но кликать на кнопку «отправить» нельзя до того момента, пока все поля не будут соответствовать нашим проверкам, а хочется не блокировать кнопку отправить, а например пользователь зашел на сайт и сразу решил нажать отправить и при нажатии на кнопку, чтобы ему также показались уведомления о том, что такие то поля не заполнены. Или одно поле заполнил а другое нет и нажал отправить, не заполненные поля ему показались. То есть хочется нажатие на кнопку (….submit(function…) использовать совместно с blur
Если Вы об уроках Создание привлекательной формы, то там кнопка не блокируется, как я вижу. Если Вы об уроке Валидация email, то там кнопка блокируется атрибутом disabled. Соответственно, просто уберите этот атрибут из кода и кнопка станет активной. Еще раз внимательнее посмотрите урок, я ведь объяснял в нем каждую строчку кода, в том числе и блокирование кнопки.
Я об уроке Валидация email. Вы меня вообще не понимаете. Уберите сами disabled, не заполните поля и нажмите на кнопку отправить. Что произойдет? Да произойдет отправка формы, а мне хотелось бы вывести по нажатию уведомление о не заполненном поле. И использовать совместно с blur. Спасибо за помощь!
Дмитрий, я все прекрасно понимаю и отвечаю ровно на то, о чем Вы спросили, мысли читать не научился, уж простите. Вы спросили, как разблокировать кнопку — я подсказал. Относительно запрета отправки формы, — так это реализовано в уроках Создание привлекательной формы. Именно там сделано так, чтобы форма не отправлялась пустой и для этого нужно не событие blur, а событие submit. Событие blur Вы можете использовать дополнительно, но оно никак не связано с отправкой формы и никак не поможет Вам запретить отправлять форму. Пожалуйста.