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!
html5 javascript oninvalid oninput required setcustomvalidity
Commentami!