Validació formulari HTML5

Antigament la validació de formularis s’havia de fer amb javascript, però gràcies al HTML5 i les funcions específiques van fer que fos molt més fàcil.

L’únic inconvenient que podem trobar al fer-ho d’aquesta manera és que encara no és suportat per tots els navegadors, i els que ho fan, cada un té la seva manera particular.

 

Atribut <required>

Si afegim l’atribut required en un element <input>, automàticament aquest passa a ser un camp obligatori i al ser de tipus booleà, només necessita que hi hagi quelcom escrit.

<input type="text" name="nombre" required/>

Atribut <pattern> i els tipus de <input>

Com hem dit anteriorment amb l’element required necessita qualsevol valor a l’element <input> per ser vàlid, però si a més utilitzem l’atribut pattern en conjunt, s’aconsegueix que aquest hagi de tenir un format, longitud o un tipus específic de dades. Aquest últim s’aconsegueix definint un patró amb expressions regulars.

<input type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/>

 

En el patró anterior es valida que el format del correu sigui correcta (exemple@exemple.com) però a la pràctica es pot definir que sigui del tipus email dins l’etiqueta <input> i el navegador ja farà ell mateix la validació.

<input type="email" name="email" required/>

 

També es poden validar a través de codi PHP http://www.w3schools.com/php/php_form_validation.asp però sovint ens serà molt més fàcil aprofitar els avantatges que ofereix el HTML5.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.