Controllare se il campo di input è vuoto sui campi con jQuery

Question

Ho una forma con 5 campi, tutte con la classe 'necessaria'

Nel tentativo di garantire che il presentare questi campi arent vuoto, se lo sono, aggiungere una classe , in caso contrario, return true ha provato a seguire solo senza fortuna, anche se i campi sono vuoti, il modulo viene comunque inviato.

$('.submit').click(function(){ 

if($('.required').val() == "") { 
     $('.required').addClass('error'); 
     return false; 
    } else { 
     return true; 
    }; 
}); 

Answer 1

Prova:

$('.submit').click(function(e){ 
if(!$('.required').val()) { 
    $('.required').addClass('error'); 
    e.preventDefault(); 
    } else { 
    return true; 
    }; 
}); 

Answer 2

if($('.required') restituirà una collezione di oggetti jQuery, mentre la chiamata per .val() userà solo il primo elemento di quella raccolta per effettuare il test.

provare qualcosa di simile (EDIT: non c'è bisogno di fare un loop o di prova, dal momento che il filtro espr si prenderà cura di questo per voi):

$('.submit').click(function(e) { 
    var ins = $('input.required[value=""]');   
     ins.addClass('error'); 
     return false; 
    } 
    return true; 
} 

Answer 3

Si consiglia di utilizzare il filtro per ottenere i campi vuoti . Il modulo di invio è anche meglio da usare in modo che possa gestire anche la pressione dei tasti. Se poi non si dovrà gestire il entrare pressione di un tasto all'interno del modulo che attiveranno l'evento Invia del modulo

$('yourform').submit(function(){ 
    // empty will contain all elements that have empty value 
    var empty = $('.required').filter(function(){ 
     return $.trim(this.value).length === 0; 
    }); 
    if(empty.length){ 
     empty.addClass('error'); 
     return false; 
    } 
}); 

Answer 4

Prova questo:

$('.submit').click(function() { 
    $('.required').removeClass('error').filter(function() { 
     return !$.trim(this.value).length; 
    }).addClass('error'); 
}); 

Classe error si aggiunge ai campi vuoti solo e viene rimosso diversamente.

http://jsfiddle.net/dfsq/2HxaF/

Un'altra variante che può essere utile per il vostro compito: convalida aggiuntiva sui campi sfocatura:

$('.submit').click(validate); 
$(document).on('blur', '.required', function() { 
    validate($(this)); 
}); 

function validate($field) { 
    ($field instanceof jQuery && $field || $('.required')).removeClass('error').filter(function() { 
     return !$.trim(this.value).length; 
    }).addClass('error'); 
} 

http://jsfiddle.net/dfsq/2HxaF/1/

Answer 5

Un po 'tardi alla festa, ma penso che questo sia il migliore soluzione:

Sostituisci TUTTI i campi obbligatori che non sono stati riempiti: http://jsfiddle.net/LREAh/

$('form').submit(function(){ 
if(!$('.required').val()) { 
    $('.required').attr('placeholder', 'You forgot this one'); 
    return false; 
    } else { 
     return true; 
}; 
}); 

Sostituire solo il campo del formulario presentato richiesta: http://jsfiddle.net/MGf9g/

$('form').submit(function(){ 
if(!$(this).find('.required').val()) { 
    $(this).find('.required').attr('placeholder', 'You forgot this one'); 
    return false; 
} else { 
    return true; 
} 
}); 

Naturalmente è possibile cambiare attr('placeholder', 'You forgot this one'); per addClass('error'); - è stato solo per la dimostrazione. Non hai bisogno dello id="formX" sull'html btw, stavo solo cercando qualcos'altro e ho dimenticato di rimuoverlo.