Проверка правильности ввода email на jQuery

При создании форм в веб разработке часто используется поле email, которое может быть заполнено пользователем с ошибкой. Между тем, если это произойдет, то вы не сможете с ним связаться и отправить ему сообщение.

Рассмотрим несколько способов на html5 и jQuery, чтобы избежать данной проблемы. Начнем с html5. В нем уже давно появился специальный тип поля type="email", который проверяется самим браузером на корректность ввода. Пример:

<input type="email" name="toemail">

Таким образом, при отправке формы за счет кнопки submit, если это поле будет заполнено не верно, то отправка приостановится и пользователю выйдет соответствующее уведомление. Но здесь следует уточнить, чтобы все сработало, у этого поля должен быть атрибут required, означающий, что поле обязательно к заполнению. Проверить это вы можете используя следующий пример:

<form method="post">
Введите имя: <input type="text" name="nameto">
Введите email *: <input type="email" name="emailto" required="required">
<input type="submit" name="butto" value="Отправить">
</form>

Т.е. пока пользователь не заполнит правильно поле email, форма не будет отправляться. На этом можно остановиться, но сегодня не все мобильные браузеры (с ПК дела лучше) понимают этот атрибут и тип email. Поэтому, чтобы все было кроссбраузерно придется написать скрипт на jQuery, который будет корректно работать везде. Код скрипта вы можете скачать или посмотреть в демонстрации за счет соответствующих кнопок снизу.

Если говорить кратко о скрипте, то после ввода любых символов в поле с name="email" запускается функция testvalidemail, которая сначала удаляет пробелы, если они есть, затем проверяет, что число символов больше 0 и выполняет регулярное выражение на основе которого определяет корректен ли email. Если он правильный, то поле становится зеленым, если нет, то красным.

Многих интересует вопрос, как с этим скриптом блокировать отправку формы, если email набран не верно. Привожу рабочий пример:

<script type="text/javascript">
otpravka = false;
$(document).ready(function() {
$('[name="emailto"]').on("change keyup input click", function(){ testvalidemail($(this));});
$('.fomato').submit(function(){ if(otpravka == false) return false; });
});

function testvalidemail(emailtest) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if(/\s/.test(emailtest.val()) ) {emailtest.val(emailtest.val().replace(/\s/,""))};
if(emailtest.val() != 0 && emailtest.val().length > 0) {
if(pattern.test(emailtest.val())) {emailtest.attr({"style": "border: 1px solid green"}); otpravka = true; }
else {emailtest.attr({"style": "border: 1px solid red"});}}
else {emailtest.attr({"style": "border: 1px solid #a9a9a9;"});}}
</script>

<style> [name="email"], [name=email]:focus { border: 1px solid #a9a9a9; outline: none; } </style>
<form method="post" class="fomato">
Введите имя: <input type="text" name="nameto">
Введите email: <input type="text" name="emailto">
<input type="submit" name="butto" value="Отправить">
</form>

В этом примере используется глобальная переменная otpravka, которая меняется на true если email введен правильно. Следовательно, при отправке формы с классом fomato - проверяется это условие. Если оно выполнится форма отправится успешно.