web-dev-qa-db-fra.com

Jquery form submit pour vérifier les champs vides

Comment utiliser jQuery pour vérifier si les champs de texte sont vides lors de l'envoi sans charger 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>

Merci.

jqueryform-submit
22
conmen

Tu peux le faire:

//  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

38
palaѕн

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>
10
NEO

Une solution simple serait quelque chose comme ça

$( "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: La méthode jQuery.on() est uniquement disponible dans jQuery version 1.7+, mais c'est maintenant la méthode recommandée pour attacher des gestionnaires d'événements.

Ce code parcourt toutes les entrées du formulaire et empêche la soumission du formulaire en renvoyant la valeur false si l'une d'entre elles n'a aucune valeur. Notez qu'il n'affiche aucun type de message à l'utilisateur sur les raisons pour lesquelles le formulaire n'a pas été envoyé (je vous recommande fortement d'en ajouter un).

Ou, vous pouvez regarder le plugin jQuery plugin. Il fait cela et beaucoup plus.

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

9
Dominic P

vous devez ajouter un gestionnaire au formulaire submit event. Dans le gestionnaire, vous devez vérifier chaque champ de texte, sélectionner les champs élément et mot de passe si les valeurs ne sont pas 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.
});
3
vdua

Je déteste vraiment les formulaires qui ne me disent pas quelle (s) entrée (s) est/sont manquantes .. donc j'améliore la réponse de Dominic - merci pour cela.

Dans le fichier css, définissez la classe "borderR" sur "border", de 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
});
3
Mareg

vous devriez essayer avec jquery validate plugin:

$('form').validate({
   rules:{
       email:{
          required:true,
          email:true
       }
   },
   messages:{
       email:{
          required:"Email is required",
          email:"Please type a valid email"
        }
   }
})
1
JamesN
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();
    });
});
1
Hamzeh Salhi
var save_val = $("form").serializeArray();
$(save_val).each(function( index, element ) {
    alert(element.name);
    alert(element.val);
});
0
sandeep kumar