Как да направите проверка на полето на формуляр с JQuery във FormIt
Проверка на полето в MODX Revolution с помощта на FormIt и jQuery.
- Ако нямате инсталиран FormIt, моля, изтеглете и инсталирайте.
- Не забравяйте да изтеглите най-новата версия на jQuery.
Страхотно, нека да започнем, първо трябва да извикаме нашия фрагмент FormIt:
Формуляр за контакт с изходен фрагментcontactFormTpl :
Нека добавим нашата форма:
В този пример проверяваме две полета за въвеждане и текстова област: име, имейл и коментари.
Елементите за проверка трябва да имат клас
Нека добавим проверка на полето с jQuery.
Трябва да хванем формулярите при изпращане след изпращане, за да сме сигурни, че полетата, които трябва да бъдат валидирани, имат стойности.
Сега имаме контрол над формуляра и можем да добавим нашето валидиране.
Добре, нека разбием този код част по част.
Първо избрахме нашите елементи с помощта на променливата "elem":
След това преминахме през всеки елемент:
Ако съдържа класа "задължителен", тогава се проверява дали стойността е празна или стойността по подразбиране:
Ако не отговаряше на изискванията, „грешка“ беше зададена на вярно и идентификаторът беше запазен:
Ако грешката е зададена на true, фокусът ще премине към първия поискан елемент и ще върне false (прекъсване на отравянето):
Ако всички задължителни полета са попълнени, изчистване на стойностите по подразбиране на невалидирани полета и разрешаване на изпращането на съобщението:
Проверка на имейл поле
Уверихме се, че всички задължителни полета са попълнени, сега трябва да се уверим, че потребителят е попълнил правилно полето за поща.
Нека сглобим всичко
validate-form.js
Парче:contactFormTpl :
HTML код на страницата за контакт