Як зробити перевірку полів форми за допомогою JQuery у FormIt

Перевірка полів у MODX Revolution з використанням FormIt та jQuery.

• Якщо у вас не встановлено FormIt, будь ласка, завантажте та встановіть.
• Не забувайте зробити останню версію jQuery.

Відмінно давайте почнемо, спочатку потрібно викликати наш сніпет FormIt:

Чанк виведення контакт формиcontactFormTpl :

Додамо нашу форму:

У цьому прикладі ми перевіряємо два поля введення та область тексту: Name, Email та Comments.

Елементи, що підлягають перевірці повинні мати клас

Додамо перевірку полів за допомогою jQuery.

Ми повинні зловити форми на надсиланні повідомлення, щоб переконатися, що поля, що підлягають перевірці, мають значення.

Тепер ми маємо контроль над формою і ми можемо додати нашу перевірку.

Добре, давайте розберемо цей код частинами.

По-перше, ми вибрали наші елементи використовуючи змінну "elem":

Далі ми пройшли через кожен елемент:

Якщо він містить клас "required", то перевірялося чи порожнє значення або значення за замовчуванням:

Якщо він не відповідав вимогам, йшла установка "error" в true і збереження ID:

Якщо помилка встановлена ​​в true, фокус переходив на перший необхідний елемент і повертався false (переривання отруєння):

Якщо всі необхідні поля заповнені, очищення значень за промовчанням неперевірених полів та дозволу на надсилання повідомлення:

Перевірка Email поля

Ми переконалися, що всі необхідні поля заповнені, тепер нам потрібно переконатися, що користувач заповнив поле пошти правильно.

Давайте складемо все разом

validate-form.js

Чанк:contactFormTpl :

HTML код сторінки контакту

---