Modulo Jquery inviare per verificare i campi vuoti

Question

Come posso utilizzare jquery per verificare se i campi di testo sono vuoti quando si inviano senza caricare login.php?

<form action="login.php" method="post"> 
    <label>Login Name:</label> 
    <input type="text" name="email" id="log" /> 
    <label>Password:</label> 
    <input type="password" name="password" id="pwd" /> 
    <input type="submit" name="submit" value="Login" /> 
</form> 

Grazie.

Answer 1

Si può fare questo:

// Bind the event handler to the "submit" JavaScript event 
$('form').submit(function() { 

    // Get the Login Name value and trim it 
    var name = $.trim($('#log').val()); 

    // Check if empty of not 
    if (name === '') { 
     alert('Text-field is empty.'); 
     return false; 
    } 
}); 

FIDDLE DEMO

Answer 2

si può usare 'necessaria' http://jsbin.com/atefuq/1/edit

<form action="login.php" method="post"> 
    <label>Login Name:</label> 
    <input required type="text" name="email" id="log" /> 
    <label>Password:</label> 
    <input required type="password" name="password" id="pwd" /> 
    <input required type="submit" name="submit" value="Login" /> 
</form> 

Answer 3

si dovrebbe provare con il plugin jQuery validate:

$('form').validate({ 
    rules:{ 
     email:{ 
      required:true, 
      email:true 
     } 
    }, 
    messages:{ 
     email:{ 
      required:"Email is required", 
      email:"Please type a valid email" 
     } 
    } 
}) 

Answer 4

Una soluzione semplice sarebbe qualcosa di simile

$("form").on("submit", function() { 

    var has_empty = false; 

    $(this).find('input[type!="hidden"]').each(function() { 

     if (! $(this).val()) { has_empty = true; return false; } 
    }); 

    if (has_empty) { return false; } 
}); 

Nota: Il metodo jQuery.on() è disponibile solo in versione jQuery 1.7+, ma ora è il metodo preferito di associare i gestori di eventi.

Questo codice esegue il ciclo di tutti gli input nel modulo e impedisce l'invio del modulo restituendo false se nessuna di esse non ha valore. Si noti che non visualizza alcun tipo di messaggio all'utente sul motivo per cui il modulo non è stato inviato (consiglio vivamente di aggiungerne uno).

Oppure, è possibile visualizzare il plug-in jQuery validate. Lo fa e molto altro.

NB: questo tipo di tecnica deve essere sempre utilizzato insieme alla convalida lato server.

Answer 5

è necessario aggiungere un gestore all'evento submit. Nel gestore è necessario controllare per ogni campo di testo, selezionare i campi dell'elemento e della password se i valori non sono vuoti.

$('form').submit(function() { 
    var res = true; 
    // here I am checking for textFields, password fields, and any 
    // drop down you may have in the form 
    $("input[type='text'],select,input[type='password']",this).each(function() { 
     if($(this).val().trim() == "") { 
      res = false; 
     } 
    }) 
    return res; // returning false will prevent the form from submitting. 
}); 

Answer 6

Odio davvero le forme che non mi dicono quale input (s) è/mancano. Quindi miglioro la risposta di Dominic - grazie per questo.

Nel file css, la classe "borderR" del bordo è di colore rosso.

$('#<form_id>').submit(function() { 
    var allIsOk = true; 

    // Check if empty of not 
    $(this).find('input[type!="hidden"]').each(function() { 
     if (! $(this).val()) { 
      $(this).addClass('borderR').focus(); 
      allIsOk = false; 
     } 
    }); 

    return allIsOk 
}); 

Answer 7

function isEmpty(val) { 
if(val.length ==0 || val.length ==null){ 
    return 'emptyForm'; 
}else{ 
    return 'not emptyForm'; 
} 

}

$(document).ready(function(){enter code here 
    $("form").submit(function(event) { 
     $('input').each(function(){ 
      var getInputVal = $(this).val(); 
      if(isEmpty(getInputVal) =='emptyForm'){ 
       alert(isEmpty(getInputVal)); 
      }else{ 
       alert(isEmpty(getInputVal)); 
      } 
     }); 
     event.preventDefault(); 
    }); 
}); 

Answer 8

var save_val = $("form").serializeArray(); 
$(save_val).each(function(index, element) { 
    alert(element.name); 
    alert(element.val); 
});