Impostare un messaggio custom di validazione in HTML 5

Mattepuffo's logo
Impostare un messaggio custom di validazione in HTML 5

Impostare un messaggio custom di validazione in HTML 5

L'attributo required di HTML 5 ci ha levato un sacco di rogne nella validazione dei form.

Lo impostate e lui farà tutto da solo, bloccando il form e visualizzando un messaggio.

Il messaggio è praticamente automatico e preimpostato, e penso che la lingua dipenda dal pc sui gira il browser.

Comunque, volendo, possiamo cambiare il messaggio in maniera molto semplice: basta intercettare gli eventi oninvalid e oninput.

Il tutto usando la funzione built-in di Javascript setCustomValidity:

<input type="text" name="first_name" id="first_name"
required oninvalid="this.setCustomValidity('Enter Name Here')"
oninput="this.setCustomValidity('')">

Nell'evento oninvalid impostiamo il messaggio; nell'evento oninput rimuoviamo il messaggio, in modo che non scompaia quando la input è validata.

Enjoy!


Condividi

Commentami!