HTML Input Validation


Esempio

La convalida dell'input HTML viene eseguita automaticamente dal browser in base agli attributi speciali sull'elemento di input. Potrebbe parzialmente o completamente sostituire la convalida dell'input JavaScript. Questo tipo di convalida può essere aggirato dall'utente tramite richieste HTTP appositamente predisposte, quindi non sostituisce la convalida dell'input lato server. La convalida si verifica solo quando si tenta di inviare il modulo, quindi tutti gli input limitati devono essere contenuti in un modulo per consentire la convalida (a meno che non si stia utilizzando JavaScript). Tieni presente che gli input disabilitati o di sola lettura non attivano la convalida.

Alcuni tipi di input più recenti (come email , url , tel , date e molti altri) vengono automaticamente convalidati e non richiedono i propri vincoli di convalida.

5

necessario

Utilizzare l'attributo required per indicare che un campo deve essere completato per poter passare la convalida.

<input required>

Lunghezza minima / massima

Utilizzare gli attributi minlength e maxlength per indicare i requisiti di lunghezza. La maggior parte dei browser impedisce all'utente di digitare più di un massimo di caratteri nella casella, impedendo loro di rendere la loro voce non valida ancor prima di tentare l'invio.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Specifica di un intervallo

Utilizza gli attributi min e max per limitare l'intervallo di numeri che un utente può inserire in un input di tipo number o range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />
5

Abbina un modello

Per un maggiore controllo, utilizzare l'attributo pattern per specificare qualsiasi espressione regolare che deve essere abbinata per poter passare la convalida. È inoltre possibile specificare un title , che è incluso nel messaggio di convalida se il campo non passa.

<input pattern="\d*" title="Numbers only, please.">

Ecco il messaggio mostrato in Google Chrome versione 51 quando tenti di inviare il modulo con un valore non valido all'interno di questo campo:

Si prega di abbinare il formato richiesto. Solo numeri, per favore.

Non tutti i browser visualizzano un messaggio per i pattern non validi, sebbene vi sia pieno supporto tra i browser più utilizzati.

Controlla l'ultimo supporto su CanIUse e implementalo di conseguenza.

5

Accetta il tipo di file

Per i campi di input di tipo file , è possibile accettare solo determinati tipi di file, come video, immagini, audio, estensioni di file specifiche o determinati tipi di media . Per esempio:

<input type="file" accept="image/*" title="Only images are allowed">

È possibile specificare più valori con una virgola, ad esempio:

<input type="file" accept="image/*,.rar,application/zip">

Nota: aggiungendo novalidate attributo novalidate all'elemento form o formnovalidate attributo formnovalidate al pulsante di invio, si impedisce la convalida sugli elementi del modulo. Per esempio:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

Il modulo contiene i campi necessari per "pubblicare" la bozza ma non sono necessari per "salvare" la bozza.