Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Как да създадем "плаващи" полета за въвеждане на информация с помоща на HTML5 валидация

by
Difficulty:IntermediateLength:ShortLanguages:

Bulgarian (Български) translation by Mihail Petrov (you can also view the original English article)

За да валидирате вашите формуляри сигурно ползвате JavaScript. Време е да преминете към HTML5 Имате възможност да валидирате данните с помощта само и единствено на HTML5 атрибути, като в същото време получавате пълен контрол върху стилизирането на валидираният резултат. Нека разгледаме примера:

Нека обясним примерната програма

Първата основна активност, за която трябва да се замислим, е валидацията на формата. Най-правилният подход е директното имплементиране на процеса в рамките на сървърният код, който ще обработи резултата След приключване на предходната стъпка, можем да добавим допълнителна валидация в клиентската част на нашето приложение. Чрез нея, можем да индикираме потребителя дали данните му са попълнени коректно или не. Ако сте наистина добър, web дизайнер, можете да съумеете да покажете резултата от валидацията, веднага на потребителя, така че те да са наясно дали са въвели валиден E-mail адрес

Възможно е да ползвате любимата си JavaScript библиотека JQuery например. Ако не искате да си цапате ръцете с допълнителни библиотеки, можете да напишете цялата логика на чист JavaScript

Добавяте малко допълнителни HTML тагове Добавяте още малко CSS стилове, още малко JavaScript валидация След това свързваме, JavaScript кода със сървърната ни логика с помощта на AJAX След това е време да си поблъскате малко главата в клавиатурата, защото не сте писали подобен код от няколко месеца. И така нататък

В общи линии така можем да опишем процеса необходим за реализиране на задачата Проблема е, че не е никак приятно да се преминава през всички тези стъпки

Представете си, че можете да елиминирате всички тези JavaScript валидации за които говорихме досега, и да постигнете същият резултат само с малко HTML5 атрибути и CSS

Как да валидираме данни с помощта на HTML5

В общи линии, необходимо е просто да добавите няколко HTML5 атрибута (като require или type="email" към вашите input елементи, като валидацията ще бъде извършена от самият браузър, при интерпретация на кода

Може да експериментирате, като изпратите примерната форма. След това се опитайте да изпратите формата като въведете невалиден E-mail адрес

Използване на шаблони от регулярни изрази

Може би забелязахте докато експериментирахте, че имате възможност да въведете E-mail като този a@a Очевидно е, че ще искате потребителите на вашата система да въвеждат валидни E-mail адреси, затова е необходимо да дефинирате правилен шаблон за  валидиране на входните данни. Убедете се че шаблона който дефинирате е коректен и съдържа например две точки както и набор от два или три символа в края на низа За да дефинирате шаблон използвайте атрибута pattern и необходимият ви регулярен израз

Ако имате съмнения дали трябва да инвестирате време и усилия изучаването на регулярни изрази, отговора определено е, че трябва да го направите. Регулярните изрази предоставят изключителна мощ за анализ на текстова информация., която ще ви е полезна във всички сфери от разработката на приложения

Аз лично не се справям подобаващо със създаването на сложни изрази, затова се доверих на Google и намерих следният регулярен израз за обработка на E-mail Тук можете да погледнете израза, който дефинирах

Ако потърсите по-подобна информация за този шаблон, ще разберете че автора е елиминирал нуждата от възможност за намиране на низове в долен регистър, защото очаква да използвате специфичен флаг за анализ на информация без значение от нейният регистър Но имайте предвид че, HTML5 шаблоните не приемат специални флагове, затова е необходимо да добавите и както възможност за адресиране на големи така и на малки букви (A-Za-z) Можете да прочетете подробна информация, за функцията на всеки компонент от шаблона в десният панел на приложението.

За да визуализираме грешките при валидация, можем да използваме атрибута title и да специфицираме съобщението за грешна валидация

Сега нека да пробваме да въведем E-mail адрес

Преди да сте се уплашили, искам да ви успокоя че няма да ви се налага да пишете, подобни сложни регулярни изрази за всяко поле във вашето приложение В голяма част от случаите ще ви се наложи просто да валидирате дали полето ви е попълнено с данни и дали тези данни са от правилният тип Например, ако искаме нашето поле да приема стойности по-големи от 5, записа би изглеждал по следният начин <input type="number" min="5" required>

Много е важно да не забравяте че не всички браузъри поддържат разглежданите в настоящата статия атрибути. Например Firefox не поддържа атрибута minlength За сметка на това атрибута pattern се поддържа от голяма част от браузърите, което означава, че лесно можете репликирате несъществуваща или неподдържана функционалност Например атрибута minlength може да бъде репликиран с помощта на регулярният израз pattern=".{3,}" където с 3 означаваме дължината на низа, който трябва да бъде въведен в полето

Ако не успеете да намерите шаблона, който ви е необходим, по всяко време можете да разгледате кода на JavaScript имплементацията за валидация на формуляри, която сте ползвали до сега

Незабавна валидация

Ще бъде много приятно, ако формата ни за въвеждане на E-mail индикира по някакъв начин, когато въведените в нея данни са валидни За щастие, CSS ни предоставя специален селектор :valid който може да ни помогне в този сценарии Също така съществува и противоположен селектор :invalide Нека разгледаме следният пример, въведете името си в следващата форма

Ще забележите, как рамката на полето променя цвета си след въвеждане на някакво съдържание.

Може би си мислите да пробвате конструкция от рода на :invalid:not(:empty) , но за съжаление това няма да доведе до никакъв резултат защото браузърите интерпретират, формите като празни елементи

Можем да пробваме, няколко хака с помощта на псевдо селектора :placeholder-shown но за съжаление поддръжката му е доста незначителна, а и също така не съществува адекватен начин да се замени Как да решим този проблем

На този етап, най-адекватният вариант за решаване на проблема, е добавянето на малко допълнителен JavaScript код който да активира, добавя, клас в зависимост от това дали съдържанието на формата е налично Ето и работещ пример

Нека да го украсим

Любимата ми част от подхода който ви демонстрирам, е че имаме пълен контрол над стила на формата ползвайки само CSS

Позиционирайки елемента <span> непосредствено под <input> имаме възможност да достъпим обкръжаващите го елементи с помощта на класа  .empty Сега имаме възможност да създадем фалшив елемент който да анимираме така че да се визуализира над формата в момента в който потребителя попълни информация в нея Пример:

За да направим кода си още по-семантично правилен можем да дефинираме JavaScript код, който да добавя клас empty към елемента <label> и по този начин ще елиминираме нуждата от елемента <span> под <input> полето. Остава само и единствено да модифицираме CSS стиловете по правилният начин Като например:

Класовете за валидиране могат да бъдат ползвани и в рамките на <form> елемента, така че имате възможност да стилизирате всеки аспект от приложението си

Реално погледнато, не съществуват ограничения във възможностите, които ви се предоставят, когато ползвате този подход. Ще споделя с вас няколко идеи

  • Добавете иконка за валидация, която да може да се появява и изчезва
  • Добавете ефект, който да разклаща полето за въвеждане на информация ако данните в него са грешни
  • Затъмнете полетата за въвеждане на данни ако въведената в тях информация е валидна

Поддръжка

  • Подхода работи перфектно във всички модерни браузъри и IE10+
  • IE9 не поддържа псевдо селектори за валидиране, което означава че няма да можете да визуализирате стила на формата, но въпреки това тя ще работи както трябва

Потенциални проблеми

Не съществува възможност за стилизиране на валидационното съобщение Браузърите елиминират възможността за стилизирането им. Истината е, че не смятам, че това е задължително лошо, защото доста хора ще са вече свикнали с тези съобщения Може би това е причината браузърите да не ни предоставят пряката възможност за стилизирането им Това е начин заа стандартизиране на визията им

Също така трябва да запомните че тези съобщения се визуализират извън рамките на нормалното позициониране на елементите в страницата, което означава че няма как да избутат някой от вече съществуващите компоненти с което да нарушат визуализацията им, при появяване.

Ако обаче имате нужда от пълен контрол върху визуализацията на съобщенията, то тогава този вариант, няма да е много подходящ за вас

Оставете коментар

Ще се радвам да получа малко обратна възраст, от вас, и също така ще се радвам да видя, други интересни подходи за валидация на форми

Изразявам благодарност към източниците си на информация.

Блог поста на Danny King за създаване на адаптивни полета за въвеждане на информация ме накара да се замисля по тази тема.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.