Поки поля незаповнені, кнопка не активна, дизайн і розробка сайту

Доброго вам дня. 🙂

Давненько Вам вже не писав, аж цілий місяць. Маленький відпустку в кінці літа, а потім невеликий завал на замовлення, який до сих пір триває, але все ж вільна годинка довелося виділити, бо сайт потрібно наповнювати і радувати Вас новими уроками.

Темою сьогоднішньої статті буде форма заповнення, а саме її, невелика валідація. Якщо сказати точніше, це не зовсім валідація, тому як перевірка на правильність введення проводиться не буде. Даний спосіб, робить неактивною кнопку відправки, поки потрібні поля в формі не будуть заповнені.

Блокування кнопки відправки, поки поля незаповнені, досягається за допомогою jQuery. Допоможе нам невеликий скрипт, який і буде здійснювати задумане. Давайте зробимо таку форму з неактивною кнопкою.

Підключення бібліотеки jQuery

Першим кроком буде підключення в шапку перед закривається head або в підвал перед закривающімсяbody бібліотеки jQuery.

Тут потрібно бути дуже уважним, іноді бібліотека вже підключалася раніше і повторне її підключення призведе до конфлікту і непрацездатності скрипта. Так що, в випадки не роботи, спробуйте не підключати дану бібліотеку або змінити місце підключення.

Скрипт блокування кнопки відправки

Далі, після бібліотеки додаємо скрипт, який буде перевіряти потрібні поля і у випадку їх заповнення буде активувати кнопку відправки.

У рядках 2,3,4 задаємо наші поля, а саме їх ID в майбутню форму і присвоюємо їм імена для роботи скрипта. Як говорив їх три, так що по нужді можна зайві прибрати або додати потрібні.

У 6 рядку задаються параметри за кількістю символів в полях. В даному коді вказано параметр! = 0. тобто, якщо в поле нічого немає воно не розблокує кнопку, якщо вбити хоч один символ, це поле вважається заповненим. І як видно у нас вказано три поля і кожне має однаковий параметр.

Якщо Вам потрібно задати інше мінімальна кількість символів, то потрібно трохи змінити код. Якщо Ви просто замініть "0" на потрібну цифру, то це нічого не дасть. Щоб все працювало потрібно замінити:

Тобто ми задаємо параметр увімкнути надсилання, якщо в поле більше дорівнює 7 символів. Тобто лампочка кнопки не активується поки в поле, де вказаний даний параметр не буде 7 чи більше символів. Давайте задамо наступні параметри. Для імені 2 знака, для пошти - 5 і номер 7. Готова 6 рядок скрипта виглядає так:

Для тих кого цікавить питання - А як вказати максимальну кількість символів ?. Відповідь: в HTML коді, в поле input пропишіть атрибут

який встановлює обмеження в 15 символів. Просто вкажіть своє число.

У 7 і 9 рядку вказано ID нашої майбутньої кнопки - "ВІДПРАВИТИ" з форми, яка у випадку виконання умов буде розблокована. В даному випадки це - #submit.

Щоб все спрацювало, по-перше - до потрібних полях потрібно додати подію -

яке запускає роботу нашого скрипта.

По-друге, до кнопки додати атрибут disabled, який буде відмінятися скриптом, в випадки заповнення потрібних полів.

По-третє у полів input повинен бути ID, який так само вказується і в скрипті, як я і говорив вище.

Даний метод допоміг мені при створенні форм, які використовують ajax і відправляють лист без перезавантаження сторінки в незалежності чи заповнені поля. Тобто якщо людина почне просто натискати на кнопку, то підуть порожні листи, а так кнопка блокується і не дає цього зробити.

На цьому все, спасибі за увагу. 🙂

Якщо Вам був корисним моя праця, можете підтримати сайт :)

Привіт дорогий друже

У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце