Jquery formulaire de soumission pour vérifier les champs vides

Vous pouvez utiliser 'required' 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>

Une solution simple serait quelque chose comme ceci

$( "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; }
});

Remarque:jQuery.on() la méthode n'est disponible que dans la version 1.7+ de jQuery, mais c'est maintenant la méthode préférée pour attacher les gestionnaires d'événements.

ce code boucle toutes les entrées du formulaire et empêche la soumission du formulaire en retournant false si l'une d'elles n'a pas de valeur. Notez qu'il n'affiche aucun type de message à l'utilisateur sur la raison pour laquelle le formulaire n'a pas été soumis (je voudrais fortement recommander l'ajout d'une).

Ou, vous pouvez consulter la jQuery valider plugin. Il fait cela et beaucoup plus.

NB: ce type de technique doit toujours être utilisé en conjonction avec la validation côté serveur.

vous devez ajouter un gestionnaire au formulaire envoyer événement. Dans le Gestionnaire, vous devez vérifier pour chaque champ de texte, sélectionner les champs element et password s'il y a des valeurs non vides.

$('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.
});

je déteste vraiment les formulaires qui ne me disent pas quel(s) intrant (s) est/sont absent (s). J'améliore donc la réponse de Dominic - merci pour cela.

dans le fichier css définir la classe "borderR" à la frontière a la couleur rouge.

$('#<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
});

vous devriez essayer avec jquery valider plugin :

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

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();
    });
});

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