web-dev-qa-db-fra.com

Vérifier si l'entrée est vide lors de la soumission

J'ai cherché une solution à ce problème, mais je n'arrive pas à trouver d'exemples qui me conviennent. Voici ce que j'ai jusqu'à présent:

$("#register-form").submit(function(){
            if($(".required input").val() == '') {
                alert("Please fill in all the required fields (indicated by *)");
                $(".required").addClass('highlight');
                // $('input[type=submit]', this).attr('disabled', 'disabled');
                return false;
            }
        });

Pour une raison quelconque, lorsque je soumets le formulaire sans remplir aucun des champs obligatoires (il y en a deux), cela fonctionne, mais si l'un d'entre eux est rempli, ce n'est pas le cas.

Des idées pourquoi?

Merci

osu 

jqueryvalidationforms
14
Osu

Le problème avec votre code est que vous testez uniquement le premier champ que vous avez marqué comme requis. $(".required input") ne renvoie que la première entrée de votre formulaire qui correspond à ce sélecteur.

Cela parcourt toutes les entrées du formulaire marquées comme obligatoires (selon votre sélecteur). S'il en trouve un avec la valeur '', il définit la fonction d'envoi sur false et met en surbrillance les champs vides. Il supprime également la classe de surbrillance des champs qui sont maintenant valides mais qui n'étaient pas valides auparavant lors d'une première tentative de soumission de formulaire.

$("#register-form").submit(function(){
    var isFormValid = true;

    $(".required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            isFormValid = false;
        }
        else{
            $(this).removeClass("highlight");
        }
    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");

    return isFormValid;
});
40
Ryan
$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($($this).val() == '') { 
      $(this).addClass('highlight');
    }
  });

  if ($('.required input').hasClass('highlight')) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}

Donnez un coup de feu. 

EDIT Déplacé l'alerte pour que les utilisateurs ne se fassent pas perdre la gueule avec des messages d'alerte, bonne prise.

8
David Fells

Solution simple!

 function checkForm(){
        $("input.required").css("border","1px solid #AFAFAF");
        $("input.required[value=]").css("border-color","red");
        if($("input.required").val().length<2)return false;
        return true;
    }
2
Andri

Peut-être que votre condition devrait être la suivante:

if($("input.required").val() == '')... //Pay attention to the selector

Parce que votre sélecteur a trouvé toutes les entrées enfants de. Nécessaire

1
Edgar Villegas Alvarado

En me basant sur la réponse de David Fell, (cela comporte une erreur, à mon avis), vous pouvez faire ceci:

$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($(this).val() == '') {           
      $(this).addClass('highlight');
    }
  });

  if ($('.required input.highlight').size() > 0) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}
1
Edgar Villegas Alvarado

Ce code obtient tous les champs de formulaire avec liste de sélection et case à cocher etc. 

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

Si la

$(".required input")

correspond à plus d'un élément, puis

$(".required input").val() == ''

ne fera probablement pas ce que vous attendez.

0
Mu Mind

Vous ne pouvez pas référencer les valeurs de toutes les entrées de formulaire comme ça.

var valid = true;
$('.required input').each(function(){
   if( $(this).val() == '' ){
      valid = false;
      $(this).addClass('highlight');
   }
});

Le plugin forms le fera pour vous, d'ailleurs.

0
Stefan Kendall

nom de l'entrée ou id dans ce cas utilisé id de l'entrée 

HTML:

<input type="text" id="id"... />

JQUERY:

if (!$("#id").val()) {
   do something...
}
0
obinoob