jQuery: selezionare i nuovi tipi di campi dei form HTML5 con un selettore personalizzato

HTML5 ha introdotto nuovi tipi di campi di form. Sfortunatamente, i selettori di jQuery non contemplano i nuovi campi forniti da HTML ma si limitano a selezionare i campi standard di XHTML (come :text o :radio). In questo articolo vedremo come creare un selettore personalizzato per selezionare i nuovi tipi di campi HTML5.

Ecco il nostro selettore, :textall:

(function($) {
    var types = /text|search|number|email|datetime|datetime-local|date|month|week|time|tel|url|color|range/;
    $.extend($.expr[':'], {
        textall: function(elem) {
            var type = $(elem).attr('type');
            return types.test(type);
        }
    });
})(jQuery);

Creiamo un esempio. Data la seguente marcatura:

<form action="#" method="post" id="form">
    <div>
        <input type="email" name="email" />
    </div>
    <div>
        <input type="date" name="date" />
    </div>
    <div>
        <input type="text" name="text" />
    </div>
    <div>
        <input type="checkbox" name="check" />
    </div>
    <div>
        <input type="radio" name="radio" />
    </div>
	<p><input type="submit" name="submit" value="Submit" /></p>
</form>
​

Possiamo utilizzare il nostro selettore in questo modo:

$('input:textall', '#form').addClass('text');​

Potete visionare l'esempio finale in questa pagina.