C'è una certa confusione a riguardo del tipo di verifica da effettuare sui campi di testo dei form per stabilire se un valore è assente o vuoto. Per prima cosa, c'è da dire che la confusione deriva dal fatto che non si tengono presenti le specifiche DOM sia quando si usa jQuery che quando si utilizza invece un più tradizionale approccio basato sul DOM. In particolare, molti pensano che la proprietà value di un campo di testo (quella usata da jQuery nel metodo val()) venga equiparata ad un nodo attributo. Vediamo perchè le cose non stanno così.
value non è un nodo attributo, ma una proprietà che ha come valore una stringa (string). Quindi le verifiche che usano come termine di paragone il valore primitivo null sono errate, perchè tale valore si applica ai nodi (elementi, attributi, ecc.) e non alle proprietà con valore stringa.
Dato il seguente form:
<form action="#" method="get" id="test">
<div>
<input type="text" name="q" id="q" />
<input type="submit" value="Cerca" />
</div>
</form>
Possiamo condurre il seguente test, sia usando jQuery che il DOM:
$(function() {
$('#test').submit(function(event) {
var $form = $(this);
var value = $('#q', $form).val();
var value2 = document.getElementById('q').value;
console.log(typeof value); // string
console.log(typeof value2); // string
event.preventDefault();
});
});
Sia che il campo contenga un valore o meno, il risultato è sempre una stringa. Quindi la verifica corretta da fare è la seguente:
if(value == '' || value.length == 0) {
// messaggio
}