Задача стояла следующая - проводить элементарную валидацию html формы: не пустые поля, формат поля почты, полей с только цифрами и полей только с буквами. Делается это на клиентской стороне, силами jQuery.
Оказывается существует немало "движков" валидации, среди которых есть сложные и продуманные, а есть простые и понятные. После непродолжительных поисков и пары проб мною был выбран движок jQuery.validationEngine v 2.6.1 (версия на момент написания поста).
Мне, как человеку, неглубоко знающему jQuery этот движок кажется вполне понятным и удобным. Кроме того он подсвечивает несоответствия очень аккуратно - не лепит свои замечания между элементами моей формы, а добавляет над "плохим" полем div'ы в стиле hint подсказки.
Подключить валидацию очень просто - качаем файлы проекта, выбираем нужные нам: скрипт валидатора и локали (помимо всех прочих есть и русский язык), файл стиля и подключаем их к нашей страничке, не забыв подключить саму jQuery.
Далее нужно дать движку понять что он должен валидировать. Для этого скармливаем ему форму, указав ее айдишник:
Теперь движок знает что ему нужно валидировать форму
Но пока не знает какие поля и по каким правилам. Давайте это ему объясним. Допустим, наша форма имеет вид:
По задумке все поля должны быть не пустыми; поля пароль и подтверждение пароля должны иметь одинаковые значения; поле почты должно содержать адрес электронной почты (по маске a@b.c)
Чтобы задать правила валидации, нужно присвоить элементам определенные классы:
Обязательному к заполнению полю нужно присвоить класс
class="validate[required] text-input"
Полю, содержимое которого должно соответствовать содержимому другого поля, нужно присвоить класс
class="validate[required,equals[password]] text-input" здесь equals[password] указывает айди поля, с содержимым которого сравнивается содержимое валидируемого поля.
Также нужно указать класс кнопке submit class="submit" Применив эти нехитрые правила мы получим такой код формы:
Такой способ валидации является самым простым. Движок поддерживает более сложные варианты с кучей правил и деталей. Подробнее почитать про возможные виды валидации можно на страничке документации по движку.
Оказывается существует немало "движков" валидации, среди которых есть сложные и продуманные, а есть простые и понятные. После непродолжительных поисков и пары проб мною был выбран движок jQuery.validationEngine v 2.6.1 (версия на момент написания поста).
Мне, как человеку, неглубоко знающему jQuery этот движок кажется вполне понятным и удобным. Кроме того он подсвечивает несоответствия очень аккуратно - не лепит свои замечания между элементами моей формы, а добавляет над "плохим" полем div'ы в стиле hint подсказки.
Подключить валидацию очень просто - качаем файлы проекта, выбираем нужные нам: скрипт валидатора и локали (помимо всех прочих есть и русский язык), файл стиля и подключаем их к нашей страничке, не забыв подключить саму jQuery.
Далее нужно дать движку понять что он должен валидировать. Для этого скармливаем ему форму, указав ее айдишник:
Теперь движок знает что ему нужно валидировать форму
Но пока не знает какие поля и по каким правилам. Давайте это ему объясним. Допустим, наша форма имеет вид:
По задумке все поля должны быть не пустыми; поля пароль и подтверждение пароля должны иметь одинаковые значения; поле почты должно содержать адрес электронной почты (по маске a@b.c)
Чтобы задать правила валидации, нужно присвоить элементам определенные классы:
Обязательному к заполнению полю нужно присвоить класс
class="validate[required] text-input"
Полю, содержимое которого должно соответствовать содержимому другого поля, нужно присвоить класс
class="validate[required,equals[password]] text-input" здесь equals[password] указывает айди поля, с содержимым которого сравнивается содержимое валидируемого поля.
Также нужно указать класс кнопке submit class="submit" Применив эти нехитрые правила мы получим такой код формы:
Такой способ валидации является самым простым. Движок поддерживает более сложные варианты с кучей правил и деталей. Подробнее почитать про возможные виды валидации можно на страничке документации по движку.
Комментариев нет:
Отправить комментарий