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!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2612 articoli
310 commenti
19 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy