Перевірка заповнення полів форми за допомогою jquery, блог костаневіча степана

Перевірка заповнення полів форми за допомогою jQuery

Замовник попросив до полів форми зробити ще перевірку на заповнення перевірки форми, щоб користувачі не могли відправляти їх порожніми. Все це можна було зробити простим методом перевірки полів через HTML5. Але такий спосіб мені не підходив.

Став я думати над цим питанням, і рішення прийшло! Можна здійснити перевірку на заповнення полів форми за допомогою JQuery Validation. Цей спосіб можна використовувати на будь-яких двигунах, сайтах і т.д.
Отже, плагін JQuery Validation перевіряє поля форми на створені вами правила і, якщо є невідповідність, виводить динамічні помилки, які зробив користувач при заповненні форми.

Приступимо до створення форми.

  1. Створіть файл для форми. Якщо є файл з формою, значить, пропустіть перший пункт. Ось так виглядає код форми:
Зверніть увагу на id = "myform-1". name = "login". name = "password". Ці назви я буду використовувати, коли буду створювати правила перевірки форми. Ви за бажанням можете назвати своїми іменами.
  • До файлу, де буде розміщена форма, підключіть бібліотеку JQuery. плагін JQuery Validation і файл з розширенням «.js», де будете писати свої правила для перевірки форми.
    Вставте цей код між тегами :
  • Створіть папку «js» і створіть там файл «myscriptspravil.js» з таким кодом:

    Розберемо трохи код.
    Пункт №3.

    «Myform-1» - це назва форми і взято воно тут:

    Правила пишемо через кому між дужками login:<>

    Правила пишемо через кому між дужками password:<>

    У коді я написав до кожного пункту підказки, так що проблем, я думаю, бути не повинно.
  • Можна створити стилі CSS для помилок:

    • До речі, ви можете зберегти бібліотеку JQuery і плагін JQuery Validation в папку «js». Тоді шлях до файлів буде ось таким:

    Ось так виглядає шаблон файлу для створення правил - «myscriptspravil.js»:

    required - поле обов'язкове для заповнення (true або false)

    date - перевірка коректності дати (true або false)

    dateISO - перевірка коректності дати ISO (true або false)

    digits - тільки цифри (true або false)

    maxlength - максимальна к-ть символів

    minlength - мінімальна к-ть символів

    rangelength - кількість символів від і до (rangelength: [3, 8])

    range - число повинне бути в діапазоні від і до (range: [12, 20])

    max - максимальне значення числа

    min - мінімальне значення числа

    Можете подивитися документацію по плагіну і за правилами тут.

    Схожі статті