Активировать валидатор электронной почты html5 при потере внимания, помимо отправки форм

У меня есть поле ввода электронной почты, где я проверяю, присутствует ли электронная почта в моей базе данных, используя ajax при потере фокуса от этого ввода электронной почты. Я хочу убедиться, что введенный адрес электронной почты находится в правильном формате, прежде чем я сделаю вызов ajax. Могу ли я сделать это с помощью встроенного валидатора электронной почты html5 или мне нужно написать свою собственную функцию проверки?

Изменить: я уже использую валидатор электронной почты html5, но он проверяет электронную почту только при отправке формы.


html html-email email-validation
person thunderbird    schedule 11.05.2013    source источник
comment
Он должен автоматически проверяться при каждом нажатии клавиши... вы используете <input type="email", верно?   -  person Matt Browne    schedule 11.05.2013
comment
@MattBrowne <input id="email1" name="email1" required="required" type="email" placeholder="Your email address" onblur="checkEmailAvailability();" /> checkEmailAvailability() — это функция ajax   -  person thunderbird    schedule 11.05.2013

Ответы (1)


arrow_upward
1
arrow_downward

В Firefox он должен проверять подлинность электронной почты по мере ввода по умолчанию (собственное поведение HTML5): http://jsfiddle.net/xs65r/

Но для поддержки всех браузеров HTML5 вам потребуется вручную вызвать checkValidity() onblur и/или onkeydown.

Подробнее см. по этой ссылке: HTML5 Chrome checkValidity onBlur

Как вы сказали в своем комментарии ниже, вы должны использовать функцию this.checkValidity() в предложении if в вашей функции onblur перед вызовом ajax и самостоятельно отображать любые ошибки, поскольку в браузерах, отличных от Firefox, собственный интерфейс сообщения проверки не запускается, если форма не отправлена.

person Matt Browne    schedule 11.05.2013
comment
я точно знаю, что он не проверяет электронную почту по мере ввода, поскольку я использую тип ввода электронной почты для входа в систему без onblur или любой другой функции, и там тоже валидатор срабатывает только тогда, когда форма отправлена. - person thunderbird; 11.05.2013
comment
Тогда это должно быть что-то еще в вашем коде (или, может быть, в вашем браузере), потому что jsfiddle работает так, как я описал. - person Matt Browne; 11.05.2013
comment
Я тестировал его как на Chrome Version 26.0.1410.64, так и на Internet Explorer version 10.0.9200.16540. Он показывает только недопустимое сообщение электронной почты при нажатии кнопки отправки. - person thunderbird; 11.05.2013
comment
Мои извинения; Я думал, что вспомнил, что другие браузеры вели себя так же, как Firefox, но я ошибся. Это должно помочь прояснить ситуацию: stackoverflow.com/questions/14351260/< /а> - person Matt Browne; 11.05.2013
comment
ти это помогло. Мне нужно только использовать функцию checkValidity(this) в предложении if в моей функции onblur перед вызовом ajax. - person thunderbird; 11.05.2013
comment
эй, checkValidity(this) на самом деле не будет работать, это должно быть obj.checkValidity(), где obj - это параметр, this переданный функции. Кроме того, я только что узнал, что нет способа запустить собственный пользовательский интерфейс браузера для проверки, если вы не вызовете submit(), который в основном отправляет форму. Но вы все еще можете использовать собственный валидатор без пользовательского интерфейса через checkValidity(). - person thunderbird; 11.05.2013
comment
Это отстой... к счастью, существуют библиотеки проверки, которые понимают HTML5 и размещают для вас сообщения проверки, например jQuery Tools. валидатор и parseley.js. Но я думаю, что собственный пользовательский интерфейс в большинстве браузеров HTML5 выглядит лучше, поэтому очень жаль, что вы не можете активировать его для браузеров HTML5. - person Matt Browne; 11.05.2013