Utilizzo di jQuery per impedire l'invio di moduli quando i campi di input sono vuoti

Question

La soluzione dovrebbe essere piuttosto semplice. Sto cercando di impedire che il modulo venga inviato correttamente quando non viene trovato alcun valore nelle caselle di input. Ecco il mio JSFiddle: http://jsfiddle.net/nArYa/7/

// Markup

<form action="" method="post" name="form" id="form"> 
<input type="text" placeholder="Your email*" name="email" id="email"> 
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name" 
<button type="submit" id="signup" value="Sign me up!">Sign Up</button> 
</form> 

// jQuery

if ($.trim($("#email, #user_name").val()) === "") { 
    $('#form').submit(function(e) { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
    }) 
} 

Come si può vedere nel JSFiddle, il problema è che quando si digita qualcosa in entrambi i campi, il casella di avviso ANCORA si apre. Sto avendo difficoltà a capire perché. C'è qualcosa di sbagliato nel mio se ($. Trim ($ "# email, #user_name"). Val()) === "")?

Answer 1

due cose, # 1 il controllo per i campi vuoti che accade sulla ogni tentativo di presentare, # 2 è necessario controllare ogni campo individualmente

$('#form').submit(function() { 
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") { 
     alert('you did not fill out one of the fields'); 
     return false; 
    } 
}); 

Updated fiddle

Answer 2

Il controllo si verifica al caricamento della pagina. È necessario controllare il campo quando viene inviato il modulo.

$('#form').submit(function(e) { 
    if ($.trim($("#email, #user_name").val()) === "") { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
    } 
}); 

Answer 3

Metti la tua istruzione if all'interno del callback:

$('#form').submit(function(e) { 
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
     //You can return false here as well 
    } 
}); 

Answer 4

Credo che questo aiuterà:

$('#form').submit(function(e) { 
    e.preventDefault(); 
    $("#email, #user_name").each(function(){ 
     if($.trim(this.value) == ""){ 
      alert('you did not fill out one of the fields'); 
     } else { 
      // Submit 
     } 
    }) 
}) 

Answer 5

HTML5: utilizzare richiesto nel tag input

• Un attributo booleano.

• Il campo di inserimento deve essere compilato prima del per inviare il modulo.

• Funziona con testo, ricerca, url, telefono, email, password, selezione data, numero, casella di controllo, radio e file.

  <input required type='text'...> 
  

w3schools hint