path: root/files/it/learn/forms/form_validation/index.html

---
title: Validazione lato client delle form
slug: Learn/Forms/Form_validation
tags:
  - Apprendere
  - Esempio
  - Forms
  - Guida
  - HTML
  - JavaScript
  - Principiante
  - Web
  - regex
translation_of: Learn/Forms/Form_validation
original_slug: Learn/HTML/Forms/Form_validation
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>

<div>Prima di inviare dati al server, è importante assicurarsi che tutti i campi richiesti della form siano stati inseriti e siano nel formato richiesto. Questa viene chiamata <strong>validazione delle form lato client</strong>, ed aiuta a fare in modo che i dati inviati siano consistenti con quanto richiesto. Questo articolo illustra anche con esempi i concetti base della validazione.</div>

<div></div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisiti:</th>
   <td>Conoscenze informatiche, ed una ragionevole comprensione di <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
  </tr>
  <tr>
   <th scope="row">Obiettivo:</th>
   <td>Capire che cos'è la validazione delle form lato client, perché è importante e come applicare le varie tecniche per implementarla.</td>
  </tr>
 </tbody>
</table>

<p>La validazione lato client è un controllo che va fatto subito ed è una caratteristica importante per una buona esperienza untente; trovando i dati non corretti nel lato client, l'utente li può correggere immediatamente. Se i dati non corretti venissero inviati al server e rifiutati, si assisterebbe ad un considerevole e fastidioso ritardo operativo dovuto al traffico tra client e server per le richieste di correzione.</p>

<p>Comunque, la validazione lato client <em>non dovrebbe essere considerata</em> una misura di sicurezza sufficiente! La tua app dovrebbe sempre eseguire controlli di sicurezza <strong>anche</strong> nel <em>lato server,</em> perché le validazioni lato client sono troppo facili da bypassare, quindi gli utenti malevoli potrebbero comunque spedire dati non corretti al server. Leggi l'articolo <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a> per farti un idea di quello che <em>potrebbe</em> succedere; in questo articolo non trattiamo la validazione lato server, ma tu dovresti tenerla presente.</p>

<h2 id="Che_cosè_la_validazione_delle_form">Che cos'è la validazione delle form?</h2>

<p>Vai su qualche diffuso sito con registrazione delle form e ti accorgerai che ti  fornirà informazioni immediate se non inserisci i dati nel formato che loro si aspettano. Otterrai messaggi simili a questi:</p>

<ul>
 <li>"Questo è un camo richiesto" (Non lo puoi lasciare in bianco).</li>
 <li>"Per favore inserisci il numero di telefono nel formato xxx-xxxx" (Viene richiesto uno specifico formato di dato per essere considerato valido).</li>
 <li>"Per favore inserisci un indirizzo email valido" (la mail inserita non è nel formato corretto).</li>
 <li>"La password deve essere compresa tra 8 e 30 caratteri e deve contenere lettere maiuscole, minuscole, simboli e numeri." (Viene richiesto un formato molto particolare).</li>
</ul>

<p>Questa viene chiamata <strong>validazione della form</strong>. Quando inserisci i dati il browser e/o il web server controllano se i dati sono corretti secondo le regole stabilite dalla applicazione. La validazione fatta dal browser viene chiamata validazione <strong>lato client</strong> e quella fatta dal server viene chiamata validazione <strong>lato server</strong>. Questo articolo si occupa della validazione lato client.</p>

<p>Se le informazioni hanno il formato corretto, l'applicazione consente che vengano spedite al server il quale di solito le salva in un database. Se invece non sono corrette, viene mandato un messaggo all'utente spiegando l'errore e consentendo di riprovare.</p>

<p>Noi desideriamo che l'inserimento delle form sia il più facile possibile. Quindi per quale motivo insistiamo per la validazione? I motivi principali sono tre:</p>

<ul>
 <li><strong>Vogliamo che ci arrivino i dati giusti nel formato corretto.</strong> La nostra applicazione potrebbe non funzionare in modo corretto se i dati che ci arrivano sono scorretti o incompleti.</li>
 <li><strong>Vogliamo proteggere i dati degli utenti</strong>. Costringendo gli utenti ad inserire password robuste facilitiamo la protezione delle loro informazioni anagrafiche.</li>
 <li><strong>Vogliamo proteggere noi stessi</strong>. Ci sono molti modi che gli utenti malevoli possono provare per danneggiare le applicazioni se la form non è protetta (vedi <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).<br>
  {{warning("Mai fidarsi dei dati inviati al server dal client. Anche se la form è stata validata correttamente, gli utenti malevoli potrebbero alterare la richiesta di rete.")}}</li>
</ul>

<h2 id="Differenti_tipi_di_validazione_lato_client">Differenti tipi di validazione lato client</h2>

<p>Ci sono due tipi di validazione che si possono incontrare nel web:</p>

<ul>
 <li><strong>Validazione built-in della form</strong> usando le funzionalità di validazione delle form di HTML5, di cui parleremo spesso in questo articolo. Questo tipo di validazione di solito non richiedono molto JavaScript. La validazione built-in ha prestazioni migliori di JavaScript, ma non è altrettanto configurabile.</li>
 <li><strong>Validazione JavaScript</strong> che viene eseguita scrivendo codice JavaScript. Questa validazione si può configurare come si desidera ma deve essere scritta interamente (oppure si usa una delle molte librerie disponibili).</li>
</ul>

<h2 id="Usare_la_validazione_built-in_delle_form">Usare la validazione built-in delle form</h2>

<p>Una delle funzionalità più significative dei <a href="/en-US/docs/Learn/Forms/HTML5_input_types">HTML5 form controls</a> è la capacità di effettuare molte validazioni senza richiedere l'uso di JavaScript. Questo viene fatto usando attributi di validazione negli elementi della form. Lo abbiamo visto anche in altre occasioni, ma ricapitolando:</p>

<ul>
 <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Specifica che è un campo che deve essere riempito prima di poter invare i dati.</li>
 <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Specifica la dimensione minima e massima dei campi di testo</li>
 <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Specifica i valori minimi e massimi dei campi di tipo numerico</li>
 <li><code>type</code>: Specifica se il dato deve essere un numero, un indirizzo email o qualche altro tipo predefinito. </li>
 <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>: Specifica una <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> che definisce le regole che i dati inseriti devono seguire.</li>
</ul>

<p>Se i dati inseriti nella form seguono tutte le regole specificate dagli attributi è considerata valida. Altrimenti viene considerata non valida.</p>

<p>Quando un elemento è valido, le seguenti cose sono vere:</p>

<ul>
 <li>L'elemento è conforme alla pseudo-classe {{cssxref(":valid")}} CSS, che ti consente di applicare uno stile specifico agli elementi validi.</li>
 <li>Se l'utente prova ad inviare i dati il browser spedirà la form se non c'è nient altro le la blocca (ad esempio ulteriori validazioni JavaScript).</li>
</ul>

<p>Quando un elemento non è valido, le seguenti cose sono vere:</p>

<ul>
 <li>L'elemento è conforme alla pseudo-classe {{cssxref(":invalid")}} CSS, e qualche altra pseudo-classe (es. {{cssxref(":out-of-range")}}) in base al tipo di errore che ti consente di applicare uno stile specifico agli elementi non validi.</li>
 <li>Se l'utente prova ad inviare i dati il browser blocca la form e visualizza un adeguanto messaggio di errore.</li>
</ul>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Esistiono alcuni errori che impediscono la spedizione della form, compreso {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o un {{domxref('validityState.customError','customError')}}.</p>
</div>

<h2 id="Esempi_di_validazione_built-in_delle_form">Esempi di validazione built-in delle form</h2>

<p>In questa sezione proveremo alcuni degli attributi di cui abbiamo parlato sopra.</p>

<h3 id="Semplice_esempio_iniziale">Semplice esempio iniziale</h3>

<p>Incominciamo con un esempio semplice: Un campo di testo che ti permette di scegliere se preferisci le banane o le ciliege (banana or cherry). Questo esempio richiede un semplice testo {{HTMLElement("input")}} con associata una {{htmlelement("label")}} e un pulsante di invio {{htmlelement("button")}}. Il codice sorgente si trova su GitHub su <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> con un esempio live.</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
  &lt;input id="choose" name="i_like"&gt;
  &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>

<pre class="brush: css notranslate">input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}</pre>

<p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p>

<p>Per incominciare fai una copia di  <code>fruit-start.html</code> in una directory vuota del tuo disco fisso.</p>

<h3 id="Lattributo_required">L'attributo required</h3>

<p>La validazione HTML5 più semplice è l'attributo <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>. Per rendere obbligatorio un campo input aggiungi questo attributo. Se è presente, l'elemento esegue il controllo con la pseudo-classe {{cssxref(':required')}} e la form non viene inviata e visualizza un messaggio d'errore se il campo input è vuoto. Quando è vuoto il campo è considerato non valido anche dalla pseudo-classe {{cssxref(':invalid')}}.</p>

<p>Aggiungi l'attributo <code>required</code> come si vede qui sotto.</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="choose"&gt;Would you prefer a banana or cherry? (required)&lt;/label&gt;
  &lt;input id="choose" name="i_like" required&gt;
  &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>

<p>Considera il CSS che è incluso nel file d'esempio:</p>

<pre class="brush: css notranslate">input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}</pre>

<p>Questo CSS assegna all'input un bordo rosso a trattini quando il valore non è valido ed una linea nera più sottile quando è valido. Abbiamo anche aggiunto uno sfondo a gradiente quando è richiesto e non valido. Prova il nuovo comportamento nell'esempio sotto:</p>

<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub come <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">codice sorgente</a>.)</p>
</div>

<p>Prova ad inviare la form senza un valore. Nota che i campo non valido acquista il focus ed appare il messaggio predefinito ("Per favore inserisci questo campo"), e la form non viene inviata.</p>

<p>La presenza dell'attributo <code>required</code> in un elemento che lo supporta comporta che l'elemento controlla la pseudoclasse {{cssxref(':required')}} per controllare se contiene un valore oppure no. Se il campo {{HTMLElement("input")}} non ha un valore, attiva la pseudoclasse {{cssxref(':invalid')}}.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Per una buona esperienza utente, indica all'utente quando un campo è richiesto. Non è solo una buona pratica, ma è anche richiesto dalle linee guida <a href="/en-US/docs/Learn/Accessibility">accessibility</a> del WCAG. È anche bene rendere obbligatori i soli campi che ti servono. è inutile rendere obbligatori i campi di cui non hai reale necessità.</p>
</div>

<h3 id="Validazione_con_una_regular_expression">Validazione con una regular expression</h3>

<p>Un'altra caratteristica di validazione molto usata è l'attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, che si aspetta una <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> come valore. Una regular expression (regex) è un modello che può essere usato per confrontare una combinazione di caratteri in una stringa, questo li rende ottimi per la validazione delle form e vengono usati anche per un certo numero di altri usi in JavaScript.</p>

<p>I regex sono abbastanza complessi, e non riusciamo a spiegarli in modo completo in questo articolo. Di seguito riportiamo alcuni esempi per darti un'idea di base su come funzionano.</p>

<ul>
 <li><code>a</code> — Accetta un carattere che deve essere <code>a</code> (non <code>b</code>, nemmeno <code>aa</code>, e così via).</li>
 <li><code>abc</code> — Accetta <code>a</code>, seguito da <code>b</code>, seguito da <code>c</code>.</li>
 <li><code>ab?c</code> — Accetta <code>a</code>, opzionalmente seguito <code>b</code>, seguito <code>c</code>. ( <code>ac</code> oppure <code>abc</code>)</li>
 <li><code>ab*c </code>— Accetta <code>a</code>, opzionalmente seguito da qualsiasi numero di <code>b</code>, seguito da <code>c</code>. ( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, e via di seguito).</li>
 <li><code>a|b</code> — Accetta un carattere che può essere <code>a</code> o <code>b</code>.</li>
 <li><code>abc|xyz</code> — Accetta esattamente <code>abc</code> o esattamente <code>xyz</code> (ma non <code>abcxyz</code> o <code>a</code> o <code>y</code>, e così via).</li>
</ul>

<p>Ci sono moltissime altre possibilità che non trattiamo. Per la lista completa e molti esempi consulta la nostra documentazione delle <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular expressions</a>.</p>

<p>Proviamo ad implementare un esemio. Modifica il tuo HTML per aggiungere un attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> come il seguente:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
  &lt;input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"&gt;
  &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</pre>

<div class="hidden">
<pre class="brush: css notranslate">input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}</pre>
</div>

<p>Che ci da il seguente aggiornamento — prova:</p>

<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">codice sorgente</a>.)</p>
</div>

<p>In questo esempio, l'elemento {{HTMLElement("input")}} accetta una di quattro possibili valori: "banana", "Banana", "cherry", o "Cherry". Le regular expressions sono sono sensibili a maiuscole e minuscole, ma noi abbiamo supportato sia le parole minuscole che quelle con la prima maiuscola usando il modello "Aa" racchiuso tra parentesi quadre.</p>

<p>Prova ora a cambiare il valore dell attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> con gli esempi visti in precedenza e vedi in che modo cambiano i valori che puoi inserire. Prova anche a scrivere qualche regola per conto tuo e cerca di dare un senso alle regole rispetto al esempio della frutta!</p>

<p>Se un valore di {{HTMLElement("input")}} non soddisfa il modello della regular expression il campo <code>input</code>  applicherà la pseudoclasse  {{cssxref(':invalid')}}.</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Alcuni tipi di elemento {{HTMLElement("input")}} non necessitano di un attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> per essere validati secondo una regular expression. Specificando il tipo <code>email</code>, ad esempio, l'input viene validato con il consolidato modello per la validazione delle email o con il modello per una lista di email separate da virgole se ha anche l'attributo <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>.</p>
</div>

<div class="blockIndicator note">
<p><strong>Nota</strong>: L'elemento {{HTMLElement("textarea")}} non supporta l'attributo <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p>
</div>

<h3 id="Limitare_la_dimensione_dei_campi">Limitare la dimensione dei campi</h3>

<p>Puoi limitare la dimensione dei campi testo creati con  {{HTMLElement("input")}} o {{HTMLElement("textarea")}} usando gli attributi <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> e <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Un campo non è valido se ha meno caratteri del valore di <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> o maggiore del valore di <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>.</p>

<p>I browsers spesso non consentono all'utente di inserire più caratteri di quelli consentiti dal campo. Per migliorare l'esperienza utente invece di usare solamente <code>maxlength</code> si può fornire l'indicazione del numero di caratteri residui per dare modo all'utente di regolarsi. Un esempio di questo si trova in Twitter. Con JavaScript esiste una <a href="https://github.com/mimo84/bootstrap-maxlength">soluzione che usa <code>maxlength</code></a>, che si può utilizzare.</p>

<h3 id="Limitare_i_valori_dei_campi">Limitare i valori dei campi</h3>

<p>Per i campi numerici (es. <code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code>), gli attirbuti <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> e <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> possono essere utilizzati per fornire i limiti di valori validi. Se il campo contiene valori fuori dai limiti non è valido.</p>

<p>Vediamo un altro esempio. Creiamo una copia del file <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p>

<p>Ora sostituiamo i contenuto dell'elemento <code>&lt;body&gt;</code> con il seguente:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="number"&gt;How many would you like?&lt;/label&gt;
    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<ul>
 <li>Si può vedere che abbiamo messo 6 negli attrinuti <code>minlength</code> e <code>maxlength</code> del campo <code>text</code> che corrisponde alla lunghezza delle parole banana e cherry.</li>
 <li>Abbiamo anche aggiunto un campo <code>number</code>  con un <code>min</code> di uno ed un<code>max</code> di dieci. I numeri fuori dai limiti vengono visualizzati come non validi; gli utenti non possono usare le frecce di incremento e decremento per andare oltre i limiti. Se l'utente inserisce manualmente un dato esterno ai limiti il valore non è valido. Il numero non è obbligatorio quindi se si rimuove il valore, resta comunque valido.</li>
</ul>

<div class="hidden">
<pre class="brush: css notranslate">input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}</pre>
</div>

<p>Ecco un esempio live:</p>

<p>{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">codice sorgente</a>.)</p>
</div>

<div class="blockIndicator note">
<p><strong>Nota</strong>: <code>&lt;input type="number"&gt;</code> (ed anche altri tipi come <code>range</code> e <code>date</code>) possono anche avere l'attributo <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, che specifica il valore minimo di incremento e decremento quando viene usato il campo (ad esempio premendo i pulsanti su e giu dei campi numerici). Nel esempio precedente non abbiamo inserito l'attributo <code>step</code> quindi il valore parte da <code>1</code>. Questo significa che i numeri con la virgola come 3.2, sono anch'essi non validi.</p>
</div>

<h3 id="Esempio_completo">Esempio completo</h3>

<p>Ecco un esempio completo che dimostra l'uso delle funzionalità di validazione built-in di HTML:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Do you have a driver's license?&lt;abbr title="This field is mandatory" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
      &lt;!-- While only one radio button in a same-named group can be selected at a time,
           and therefore only one radio button in a same-named group having the "required"
           attribute suffices in making a selection a requirement --&gt;
      &lt;input type="radio" required name="driver" id="r1" value="yes"&gt;&lt;label for="r1"&gt;Yes&lt;/label&gt;
      &lt;input type="radio" required name="driver" id="r2" value="no"&gt;&lt;label for="r2"&gt;No&lt;/label&gt;
    &lt;/fieldset&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="n1"&gt;How old are you?&lt;/label&gt;
    &lt;!-- The pattern attribute can act as a fallback for browsers which
         don't implement the number input type but support the pattern attribute.
         Please note that browsers that support the pattern attribute will make it
         fail silently when used with a number field.
         Its usage here acts only as a fallback --&gt;
    &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+"&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="t1"&gt;What's your favorite fruit?&lt;abbr title="This field is mandatory" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
    &lt;input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"&gt;
    &lt;datalist id="l1"&gt;
      &lt;option&gt;Banana&lt;/option&gt;
      &lt;option&gt;Cherry&lt;/option&gt;
      &lt;option&gt;Apple&lt;/option&gt;
      &lt;option&gt;Strawberry&lt;/option&gt;
      &lt;option&gt;Lemon&lt;/option&gt;
      &lt;option&gt;Orange&lt;/option&gt;
    &lt;/datalist&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="t2"&gt;What's your e-mail address?&lt;/label&gt;
    &lt;input type="email" id="t2" name="email"&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;label for="t3"&gt;Leave a short message&lt;/label&gt;
    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;button&gt;Submit&lt;/button&gt;
  &lt;/p&gt;
&lt;/form&gt;</pre>

<p>Ed ora un po' di CSS per dare stile al HTML:</p>

<pre class="brush: css notranslate">form {
  font: 1em sans-serif;
  max-width: 320px;
}

p &gt; label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width : 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}</pre>

<p>Questo viene presentato nel modo seguente:</p>

<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p>

<p>Vedi <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">Validation-related attributes</a> per la lista completa degli attributi che possono essere utilizzati per limitare i valori ed i tipi di input che li supportano.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su  <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">codice sorgente</a>.)</p>
</div>

<h2 id="Validazione_delle_forms_con_JavaScript">Validazione delle forms con JavaScript</h2>

<p>Sei costretto ad usare JavaScript se desideri controllare l'aspetto dei messaggi nativi d'errore o per conformarti ai browsers più vecchi che non supportano la validazione built-in di HTML. In questa sezione daremo un occhiata a diversi modi per farlo.</p>

<h3 id="Le_API_di_limitazione_della_validazione">Le API di limitazione della validazione</h3>

<p>Molti browsers supportano le <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>, che consistono in un gruppo di metodi e proprietà disponibili nelle seguienti interfaccie degli elementi delle form del DOM:</p>

<ul>
 <li><code><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></code>)</li>
 <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code>)</li>
 <li><code><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code>)</li>
 <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/output">&lt;output&gt;</a></code>)</li>
 <li><code><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/select">&lt;select&gt;</a></code>)</li>
 <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (risponde all'elemento <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code>)</li>
</ul>

<p id="Constraint_validation_API_properties">Le API di validazione rendono le seguenti proprietà disponibili per li elementi di cui sopra.</p>

<ul>
 <li><code>validationMessage</code>: Restituisce un messaggio che descrive il limite di validazione che il campo non soddisfa nella lingua del browser. Se il campo non ha limiti di validazione  (<code>willValidate</code> è <code>false</code>) o se il valore è valido restituisce una stringa vuota.</li>
 <li><code>validity</code>: Restituisce un oggetto <code>ValidityState</code> che contiene alcune proprietà che descrivono lo stato di validità dell'elemento. Puoi trovare tutti i dettagli delle proprietà disponibili nella pagina di riferimento {{domxref("ValidityState")}}; sotto elenchiamo alcuni dei più comuni:
  <ul>
   <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Restituisce <code>true</code> se il valore non è conforme al modello specificato in {{htmlattrxref("pattern", "input")}}, e <code>false</code> se è conforme. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
   <li>{{domxref("ValidityState.tooLong", "tooLong")}}: Restituisce <code>true</code> se il valore supera la lunghezza massima specificata in {{htmlattrxref("maxlength", "input")}}, o <code>false</code> se è più corta o ugauale al massimo.Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
   <li>{{domxref("ValidityState.tooShort", "tooShort")}}: Restituisce <code>true</code> se il valore è più corto della dimensione minima specificata da {{htmlattrxref("minlength", "input")}}, o <code>false</code> se è uguale o maggiore del minimo. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
   <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Restituisce <code>true</code> se il valore supera il massimo specificato da {{htmlattrxref("max", "input")}}, o <code>false</code> se è inferiore o uguale al massimo. Se è <code>true</code>, l'elemento attiva le pseudoclassi {{cssxref(":invalid")}} e {{cssxref(":out-of-range")}}.</li>
   <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Restituisce <code>true</code> se il valore è inferiore al minimo specificato da {{htmlattrxref("min", "input")}}, o <code>false</code> se è maggiore o ugualeal minimo. Se è <code>true</code>, l'elemento attiva le pseudoclassi {{cssxref(":invalid")}} e {{cssxref(":out-of-range")}}.</li>
   <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Restituisce <code>true</code> non rispetta la sintassi (quando {{htmlattrxref("type", "input")}} è <code>email</code> o <code>url</code>), o <code>false</code> se la sintassi è corretta. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
   <li><code>valid</code>: Restituisce <code>true</code> se l'elemento rispetta tutti i parametri di validazione ed è quindi considerato valido, o <code>false</code> se non ne rispetta almeno uno. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":valid")}}; altimenti attiva la pseudocasse {{cssxref(":invalid")}}.</li>
   <li><code>valueMissing</code>: Restituisce <code>true</code> se l'elemento possiede l'attributo {{htmlattrxref("required", "input")}}, ma non è stato inserito un valore o <code>false</code> altirmenti. Se è <code>true</code>, l'elemento attiva la pseudoclasse CSS {{cssxref(":invalid")}}.</li>
  </ul>
 </li>
 <li><code>willValidate</code>: Restituisce <code>true</code> se l'elemento verrà validato quando la form verrà spedita; altrimenti <code>false</code>.</li>
</ul>

<p id="Constraint_validation_API_methods">Le API di validazione rendono anche disponibili i seguenti metodi per gli elementi di cui sopra.</p>

<ul>
 <li><code>checkValidity()</code>: Restituisce <code>true</code> se il valore dell'elemento non ha problemi di validazione; altrimenti <code>false</code>. Se l'elemento non è valido viene anche lanciato un <a href="/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> event</a> sul elemento.</li>
 <li><code>setCustomValidity(<em>message</em>)</code>: Aggiunge un messaggio di errore personalizzato all'elemento; se si imposta il messaggio di errore personalizzato l'elemento viene considerato non valido, e viene visualizzato l'errore specificato. Questo consente di usare codice JavaScript per stabilire condizioni di errore di validazione diversi da quelli messi a disposizione dallo standard HTML5. Il messaggio viene esposto all'utente quando si presenta il problema.</li>
</ul>

<h4 id="Implementare_un_messaggio_di_errore_personalizzato">Implementare un messaggio di errore personalizzato</h4>

<p>Come abbiamo visto negli esempi di limiti di validazione HTML5 in precedenza, ogni volta che l'utente tenta di inviare una form non valida, il browser visualizza un messaggio d'errore. Il modo in cui viene visualizzato dipende dal browser.</p>

<p>Questi messaggi automatizzati hanno due controindicazioni:</p>

<ul>
 <li>Non c'è modo di cambiare il loro aspetto con CSS.</li>
 <li>Essi dipendono dalla lingua del browser, che signfica che potresiti avere una pagina scritta in una lingua ed i messaggi di errore in un'altra come si vede in questa immagine presa da Firefox.</li>
</ul>

<p><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p>

<p>Personalizzare questi messaggi di errore è uno dei casi più comuni di utilizzo delle <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">constraint validation API</a>. Vediamo un piccolo esempio di come fare questo.</p>

<p>Incominciamo con un po' di HTML semplice (prova ad inserirlo in un file HTML vuoto o usa come base una copia di of <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> come preferisci):</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;label for="mail"&gt;I would like you to provide me with an e-mail address:&lt;/label&gt;
  &lt;input type="email" id="mail" name="mail"&gt;
  &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>

<p>Ed aggiungi il seguente JavaScript alla pagina:</p>

<pre class="brush: js notranslate">const email = document.getElementById("mail");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I am expecting an e-mail address!");
  } else {
    email.setCustomValidity("");
  }
});</pre>

<p>Qui aggiungiamo un riferimento al campo email ed aggiungiamo un event listener che viene eseguito ogni volta che il valore cambia.</p>

<p>Nel codici controlliamo se la proprietà <code>validity.typeMismatch</code> del campo emali diventa <code>true</code>, significa che il valore contenuto non corrisponde al modello degli indirizzi email. Se è così viene chiamato il metodo <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> con un messaggio appropriato. Questo rende il campo non valido, in modo che quando viene inviata la form, l'invio fallisce e viene visualizzato il messaggio di errore.</p>

<p>Se la proprietà <code>validity.typeMismatch</code> restituisce <code>false</code>, chiamiamo il metodo <code>setCustomValidity()</code> con una stringa vuota che rende valido il campo in modo che possa essere spedito.</p>

<p>Lo puoi provare con:</p>

<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">codice sorgente</a>.)</p>
</div>

<h4 id="Un_esempio_più_dettagliato">Un esempio più dettagliato</h4>

<p>Ora che abbiamo visto un esempio molto semplice, vediamo come possiamo usare le API per costurire un sistema di validazione un po' più complesso.</p>

<p>Prima di tutto il codice HTML:</p>

<pre class="brush: html notranslate">&lt;form novalidate&gt;
  &lt;p&gt;
    &lt;label for="mail"&gt;
      &lt;span&gt;Please enter an email address:&lt;/span&gt;
      &lt;input type="email" id="mail" name="mail" required minlength="8"&gt;
      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
    &lt;/label&gt;
  &lt;/p&gt;
  &lt;button&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>

<p>Questa semplice form usa l'attributo <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> per disattivare la validazine automatica del browser; questo consente al nostro script di prendere il controllo della validazione. Questo comunque non disabilita il supporto per le API di validazione e l'applicazione delle pseudoclassi CSS come {{cssxref(":valid")}}, ecc. Questo significa che se anche il browser con controlla la validità della form prima di spedire i dati, tu puoi comunque farlo dal solo ed applicare lo stile appropriato.</p>

<p>Il nostro input da validare è un <code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code>, che è <code>required</code>, ed ha un <code>minlength</code> di 8 caratteri. Proviamo a controllare la validità usando il nostro codice e visualizziamo un messaggio appropriato per ciascun attributo.</p>

<p>Ci proponiamo di visualizzare il messaggio all'intermo di un elemento <code>&lt;span&gt;</code>. L'attributo <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> per assicurarci che il nostro messaggio di errore verrà reso disponibile a tutti compresi coloro che usano i lettori di schermo.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Il punto chiave qui è l'uso dell'attributo <code>novalidate</code> per la form che è ciò che impedisce alla form di vidualizzare il proprio messaggio di errore e ci consente invece di visualizzare il nostro messaggio presonalizzato nel DOM in qualche modo scelto da noi.</p>
</div>

<p>Ora un po' di CSS oer migliorare leggermente il look della form, e fornire qualche tipo di informazione quando il valore non è valido:</p>

<pre class="brush: css notranslate">body {
  font: 1em sans-serif;
  width: 200px;
  padding: 0;
  margin : 0 auto;
}

p * {
  display: block;
}

input[type=email]{
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  box-sizing: border-box;
}

/* This is our style for the invalid fields */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* This is the style of our error messages */
.error {
  width  : 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;

  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}</pre>

<p>Ora vediamo il codice JavaScript che implementa l'errore personalizzato di validazione.</p>

<pre class="brush: js notranslate">// There are many ways to pick a DOM node; here we get the form itself and the email
// input box, as well as the span element into which we will place the error message.
const form  = document.getElementsByTagName('form')[0];

const email = document.getElementById('mail');
const emailError = document.querySelector('#mail + span.error');

email.addEventListener('input', function (event) {
  // Each time the user types something, we check if the
  // form fields are valid.

  if (email.validity.valid) {
    // In case there is an error message visible, if the field
    // is valid, we remove the error message.
    emailError.innerHTML = ''; // Reset the content of the message
    emailError.className = 'error'; // Reset the visual state of the message
  } else {
    // If there is still an error, show the correct error
    showError();
  }
});

form.addEventListener('submit', function (event) {
  // if the email field is valid, we let the form submit

  if(!email.validity.valid) {
    // If it isn't, we display an appropriate error message
    showError();
    // Then we prevent the form from being sent by canceling the event
    event.preventDefault();
  }
});

function showError() {
  if(email.validity.valueMissing) {
    // If the field is empty
    // display the following error message.
    emailError.textContent = 'You need to enter an e-mail address.';
  } else if(email.validity.typeMismatch) {
    // If the field doesn't contain an email address
    // display the following error message.
    emailError.textContent = 'Entered value needs to be an e-mail address.';
  } else if(email.validity.tooShort) {
    // If the data is too short
    // display the following error message.
    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
  }

  // Set the styling appropriately
  emailError.className = 'error active';
}</pre>

<p>I commenti spiegano le cose per bene, ma brevemente:</p>

<ul>
 <li>Ogni volta che cambia il valore dell'input controlliamo per vedere se contiene dati validi. Se lo sono rimuoviamo eventuali messaggi di errore. Se invece ci sono errori eseguiamo <code>showError()</code> per inviare il messaggio appropriato.</li>
 <li>Ogni volta che proviamo ad inviare la form controlliamo nuovamente se i dati sono validi. Se è così consentiamo la spedizione. Altrimenti eseguiamo <code>showError()</code> per visaulizzare il messaggio appropriato ed impedire la spedizione della form con <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li>
 <li>La funzione <code>showError()</code> utilizza varie proprietà della <code>validity</code> dell'input per determinare il tipo di errore e quindi visualizzare il messaggio appropriato.</li>
</ul>

<p>Ecco il risultato live:</p>

<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Puoi trovare questo esempio live su GitHub su <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">codice sorgente</a>.)</p>
</div>

<p>Le API di validazione ti forniscono uno stumento potente per gestire la validaizone delle form, fornendoti un grande controllo sulla interfaccia utente sopra e sotto quello che puoi fare con i soli HTML e CSS.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Per ulteriori ingormazioni vedi il nostro <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a>, ed il riferimento <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>.</p>
</div>

<h3 id="Validare_le_forms_senza_le_built-in_API">Validare le forms senza le built-in API</h3>

<p>In alcuni casi come ad esempio per i browsers più vecchi o per il supporto ai <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">custom controls</a>, non sarà possibile usare le API di validazione. Potrai ancora utilizzare JavaScript per validare la tua form, ma devi scrivere tutto da solo.</p>

<p>Per validare la form fatti alcune domande:</p>

<dl>
 <dt>Che tipo di validazione devo eseguire?</dt>
 <dd>Devi determinare come validare i tuoi dati: operazioni sulle stringhe, conversioni di tipo, regular expressions, e via discorrendo. Sta tutto a te.</dd>
 <dt>Cosa devo fare se la form non è valida?</dt>
 <dd>Questo chiaramente è materia di UI. Devi decidere come si deve comportare la form. Deve la form spedire i dati ugualmente? Devi illuminare i campi che sono in errore? Devi visualizzare messaggi di errore?</dd>
 <dt>Come posso aiutare l'utente a correggere i dati non validi?</dt>
 <dd>Per ridurre la frustrazione dell'utente, è molto importante fornire il maggior numero di informazioni possibili per guidarlo a correggere gli errori. Dovresti fornire suggerimenti sui dati attesi ed anche messaggi di errore chiari e comprensibili. Se vuoi approfondire come approntare la UI adeguata per la validazione, ecco alcuni articoli utili che dovresti leggere:
 <ul>
  <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li>
  <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li>
  <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li>
  <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li>
 </ul>
 </dd>
</dl>

<h4 id="Un_esempio_che_non_usa_le_API_di_validazione">Un esempio che non usa le API di validazione</h4>

<p>Per illustrare questo, quello che segue è una versione semplificata dell'esempio precedente che funziona anche con i browsers più vecchi.</p>

<p>Il HTML è quasi uguale; abbiamo solo rimosso alcune funzionalità di validazione.</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;
    &lt;label for="mail"&gt;
        &lt;span&gt;Please enter an email address:&lt;/span&gt;
        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
    &lt;/label&gt;
  &lt;/p&gt;
  &lt;!-- Some legacy browsers need to have the `type` attribute
       explicitly set to `submit` on the `button`element --&gt;
  &lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>

<p>Allo stesso modo, anche il CSS non necessita di grandi modifiche; abbiamo solo trasformato la pseudoclasse {{cssxref(":invalid")}} in una vera classe ed evitato di usare il selettore di attiributo che non funziona con Internet Explorer 6.</p>

<pre class="brush: css notranslate">body {
  font: 1em sans-serif;
  width: 200px;
  padding: 0;
  margin : 0 auto;
}

form {
  max-width: 200px;
}

p * {
  display: block;
}

input.mail {
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  box-sizing: border-box;
}

/* This is our style for the invalid fields */
input.invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus.invalid {
  outline: none;
}

/* This is the style of our error messages */
.error {
  width  : 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}</pre>

<p>Le modifiche maggiori sono nel codice JavaScript, che richiede una revisione molto più pesante.</p>

<pre class="brush: js notranslate">// There are fewer ways to pick a DOM node with legacy browsers
const form  = document.getElementsByTagName('form')[0];
const email = document.getElementById('mail');

// The following is a trick to reach the next sibling Element node in the DOM
// This is dangerous because you can easily build an infinite loop.
// In modern browsers, you should prefer using element.nextElementSibling
let error = email;
while ((error = error.nextSibling).nodeType != 1);

// As per the HTML5 Specification
const emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

// Many legacy browsers do not support the addEventListener method.
// Here is a simple way to handle this; it's far from the only one.
function addEvent(element, event, callback) {
  let previousEventCallBack = element["on"+event];
  element["on"+event] = function (e) {
    const output = callback(e);

    // A callback that returns `false` stops the callback chain
    // and interrupts the execution of the event callback.
    if (output === false) return false;

    if (typeof previousEventCallBack === 'function') {
      output = previousEventCallBack(e);
      if(output === false) return false;
    }
  }
};

// Now we can rebuild our validation constraint
// Because we do not rely on CSS pseudo-class, we have to
// explicitly set the valid/invalid class on our email field
addEvent(window, "load", function () {
  // Here, we test if the field is empty (remember, the field is not required)
  // If it is not, we check if its content is a well-formed e-mail address.
  const test = email.value.length === 0 || emailRegExp.test(email.value);

  email.className = test ? "valid" : "invalid";
});

// This defines what happens when the user types in the field
addEvent(email, "input", function () {
  const test = email.value.length === 0 || emailRegExp.test(email.value);
  if (test) {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  } else {
    email.className = "invalid";
  }
});

// This defines what happens when the user tries to submit the data
addEvent(form, "submit", function () {
  const test = email.value.length === 0 || emailRegExp.test(email.value);

  if (!test) {
    email.className = "invalid";
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";

    // Some legacy browsers do not support the event.preventDefault() method
    return false;
  } else {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  }
});</pre>

<p>Il risultato assomiglia a questo:</p>

<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p>

<p>Come puoi vedere, non è proprio così difficile costruire un tuo sistema di validazione. La parte difficile è di renderlo abbastanza generico da essere usato su tutte le piattaforme e con ogni form che andarai a creare. Ci sono anche molte librerie pronte che ti aiuntano nella validazione come ad esempio <a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a>.</p>

<h2 id="Metti_alla_prova_le_tue_capacità!">Metti alla prova le tue capacità!</h2>

<p>Sei arrivato alla fine di questo articolo, ma riesci a ricordare le informazioni più importanti? Puoi trovare alcuni ulteriori test per verificare che tu abbia recepito questi informazioni prima di proseguire — vedi <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation">Test your skills: Form validation</a>.</p>

<h2 id="Sommario">Sommario</h2>

<p>La validazione delle form lato client alle volte richiede JavaScript se desideri configurare lo stile ed i messaggi di errore, ma richiede <em>sempre</em> che tu pensi attentamente all'utente. Ricordati sempre di guidare l'utente ad inserire dati corretti. Quindi assicurati di:</p>

<ul>
 <li>Visualizzare messaggi di errore espliciti.</li>
 <li>Sii permissivo per i formati di input non essenziali.</li>
 <li>Segnala in modo esatto il punto in cui si verifica l'errore soprattutto se la form è molto grande.</li>
</ul>

<p>Quando hai controllato che la form è stata compilata correttamente, la puoi inviare. In seguito spieghiamo come <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">spedire i dati delle form</a>.</p>

<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>

<h2 id="In_questo_modulo">In questo modulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/Forms/Your_first_form">La tua prima form</a></li>
 <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Come strutturare una form web</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">I principali controlli nativi delle form</a></li>
 <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">I tipi di input HTML5</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Altri controlli delle form</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aggiungere stile alle form web</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Stili delle form avanzati</a></li>
 <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Le pseudo-classi UI</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validazione delle form dal dato client</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Inviare i dati delle form</a></li>
</ul>

<h3 id="Argomenti_avanzati">Argomenti avanzati</h3>

<ul>
 <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Come costurire controlli delle form personalizzati</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Inviare le forms con JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabella di compatibilità dei controlli per le form</a></li>
</ul>