Саме про перевірку email на стороні клієнта і піде мова в даній статті. Реалізовувати ми це будемо на jQuery, тому щоб ви всі зрозуміли, бажано знати базові особливості роботи з цим фрейворком.
Всі вихідні, які застосовуються в даному уроці, ви можете завантажити, якшо по кнопці нижче.
Крок 1 - Підготовка. Створюємо форму на HTML
Створюємо просту сторінку на HTML. Звертаю вашу увагу, що до неї обов'язково повинна бути підключена бібліотека jQuery.
Також між тегами head. ми відкрили конструкцію script. де власне і будемо писати сам код.
Крок 2 - Задаємо на подію blur перевірку поля
Якщо користувач клацне по полю введення email, то дане поле отримує фокус. Після того, як користувач введе email і прибере курсор миші з поля, фокус втрачається і настає подія blur. Саме на цю подію ми і повісили обробник.
Крок 3 - Перевіряємо, чи не є поле порожнім
Перед тим як почати валідацію введеного email, необхідно перевірити, а ввів взагалі користувач що-небудь? Тому що, поле може бути порожнім.
Якщо воно виявилося порожнім, то ми виводимо попередження про це.
Крок 4 - Робимо повну перевірку введеного email
От і все! Ми з вами реалізували поставлені завдання, але при цьому також хотілося ще раз нагадати, що на даний тип перевірки (перевірка на стороні клієнта) не потрібно покладатися цілком. Тому не забувайте завжди перевіряти отримані дані вже на стороні сервера.
а як вирішити якийсь мінус?
якщо користувач заповнив поле з поштою в останню чергу і у нього немає необхідності кликати ще десь по екрану, то кнопка залишиться неактивній.
за фактом виходить: заповнив поле -> клікнув поза полем -> можна тиснути на активну кнопку
мінус: заповнив поле -> цей крок виключаємо -> натискаємо до посиніння по неактивній кнопці навіть при вірно заповненому поле
