In questo articolo, ti mostrerò come convalidare un modulo con HTML5, questo è un modo abbastanza semplice ma molto efficace.

In passato convalidavamo i moduli con Javascript, ma ora puoi farlo utilizzando gli attributi che HTML5 ha aggiunto all'input e seleziona i tag. Anche se sembra molto facile, in realtà lo usiamo ancora raramente, perché l'interfaccia non è bella come le librerie di validazione professionali.

1. Inserimento dati richiesto in HTML5

Per richiedere all'utente di inserire i dati nella casella di input, utilizziamo l'attributo require . Ora, se invii intenzionalmente il modulo, ti avviserà di inserire i dati in quella casella.

 <form> <input type="text" required /><br /> <input type="submit" value="Submit now" /> </form>

2. Richiede l'inserimento dell'indirizzo e-mail utilizzando HTLM5

Se vuoi forzare l'utente a inserire una determinata cella con il formato email, usa il tag input type="email" .

 <form> <input type="email" required /> <br /> <input type="submit" value="Submit Now!"> </form>

In alternativa, puoi anche utilizzare l'attributo pattern come segue:

 <form> <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/" required /> <br /> <input type="submit" value="Submit Now!"> </form>

Quale modo dovrebbe essere usato?

In effetti, puoi utilizzare qualsiasi metodo, purché dia il giusto risultato. Tuttavia, non utilizzare entrambi contemporaneamente perché creerà facilmente conflitti.

3. Richiedi di inserire l'URL del sito web in HTML5

Il tag di input è molto magico, ha un attributo type con molte categorie diverse, inclusi i tipi di URL.

Per convalidare l'URL, utilizziamo il seguente modo:

 <form> <input type="url" required /> <input type="submit" value="Submit Now!"> </form>

In alternativa, puoi anche usare il modello.

 <form> <input type="url" pattern="https?://.+" required /> <input type="submit" value="Submit Now!"> </form>

4. input numerico richiesto in HTML5

Il tag input type="number" consentirà all'utente di inserire un numero, questo è un metodo abbastanza buono, perché ci fornisce altri due valori minimo e massimo.

L'esempio seguente è un modulo dati con un inserimento numerico richiesto:

 <form> <input type="number" required> <input type="submit" value="Submit Now!"> </form>

Qui limiteremo due valori min e max, non potrai inserire numeri al di fuori del suo intervallo:

 <form> <input type="number" min="10" max="20" required> <input type="submit" value="Submit Now!"> </form>

Se vuoi che ogni clic modifichi il valore con un salto diverso da 1, usa l'attributo step:

 <form> <input type="number" min="10" max="20" step="2" value="16" required> <input type="submit" value="Submit Now!"> </form>

Sopra sono riportati alcuni modi per utilizzare HTML5 per convalidare i dati del modulo. Questo articolo è relativamente semplice, ma ti aiuterà anche a comprendere alcune delle basi di HTML5. Ci vediamo al prossimo post.