La validazione dei form è una di quelle cose che possono rendere la vita del web designer e programmatore poco piacevole: spesso non si può prescindere da soluzioni server side, JavaScript in ogni caso non offre prospettive molto eleganti e le soluzioni AJAX sono di solito un po' complicate da implementare.

Con HTML5 anche questo problema dovrebbe essere risolto: la specifica "ufficiale" (si fa per dire, uno standard ufficiale ancora non c'è e non ci sarà fino al 2022) introduce una sintassi che consente di specificare degli attributi di validazione per ogni elemento di un form, lasciando così al browser la validazione dell'input.

Gli attributi di validazione

I vari attributi e valori che possono essere utilizzati per forzare la validazione da parte del browser sono i seguenti:

  • required: si può usare sugli elementi <input>, <select> e <textarea> per indicare che il campo è obbligatorio
  • pattern: sul campo <input> richiede il match del valore con una specifica regular expression
  • min e max: per l'elemento <input> limitano ad un massimo e un minimo i valori possibili
  • step: per l'elemento <input>, usato insieme a min e max consente di specificare lo "step" per ogni valore, se il valore inserito non rispetta quello step il form non valida. Ad esempio se step = 5 un valore tipo 123 non può essere inserito
  • maxlength: su <input> e <textarea> limita il numero di caratteri che possono essere inseriti

Oltre a questo si possono specificare come "type" di un <input> "url" e "email" per indicare che il campo in questione è una URL o un indirizzo email (questo è molto utile sia per la validazione ma anche per dispositivi tipo iPhone dove la tastiera "cambia" a seconda del tipo di input che si sta compilando)

Alcuni esempi:

  • Campo email obbligatorio:
    <input id="username" type=email required name="campo">
     
  • Un campo che deve essere composto da un numero seguito da tre lettere maiuscole:
    <input pattern="[0-9][A-Z]{3}" name="campo" />
     
  • Un campo con valori massimi e minimi in cui lo step è di 5 (quindi valori tipo 92, 43 o 2 non sono accettati)
      <input name="campo" type=range min=0 max=100 step=5>

Supporto sui browser

Al momento attuale (Gennaio 2011) pare che solo Opera e i browser basati su Chromium supportino la validazione dei form, e proprio Opera ha un bell'esempio online all'indirizzo http://dev.opera.com/articles/view/improve-your-forms-using-html5/example.html (da visitare con Opera – molto simpatico anche l'utilizzo delle "pseudo-classi" per dare uno stile diverso ai campi obbligatori e non)

Nell'attesa che tutti i browser implementino questa utilissima funzionalità, un metodo piuttosto semplice per capire se la validazione è supportata o meno è usare una funzione JavaScript tipo questa:

function supportsValidity(){<br />      var i = document.createElement('input');<br />      return typeof i.validity === 'object'<br />    }

Per tutte le informazioni e le specifiche, il draft standard su questi attributo è: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html