HTML5 attributo required e fallback

I campi obbligatori nelle form ti danno noie?

Da quando è uscito HTML5 lo standard vuole che si usi l’attributo required per rendere obbligatorio un campo. Tuttora però, come evidenzia caniuse.com, abbiamo un supporto parziale soprattutto per browser dei dispositivi mobile.

Diventa così indispensabile mettere a disposizione delle fallback per ovviare ogni tipo di problema.

Vediamo quindi, in questo tutorial, come inserire campi obbligatori tramite l’attributo required su tutti i dispositivi desktop e mobile.

jQuery, Validation, Modernizr e si comincia

Procuriamoci jQuery, jQuery Validation e Modernizr ed incominciamo a scrivere…

HTML

<form action="" method="post">
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" required>
<label for="email">Email</label>
<input type="email" name="email" id="email" required>
<button type="submit">Invia</button>
</form>

Javascript

Tramite Modernizr verifichiamo il supporto per “required” usando if (!Modernizr.input.required) { se non troveremo il supporto aggiungeremo una classe chiamata required che permetterà di attivare la fallback.

(function ($) {
	// controlla il supporto per "required"
	if (Modernizr.input.required) {
		// non fare nulla se è supportato
	} else {
		// se no attraversa tutti i campi input
		$('form').find('input[required]').each(function () {
			// e aggiungi una classe required
			$(this).attr('class', 'required ' + this.getAttribute('type')).removeAttr('required');
		});
		// e inizializza il plugin di validazione
		$('form').each(function () {
			$(this).validate();
		});
	}
}(jQuery));

Et voilà. Il gioco è fatto.

PS: Per customizzare le opzioni di validazione vi invito a leggere la documentazione di jQuery validation!