web-dev-qa-db-fra.com

jQuery s'assure que tous les champs du formulaire sont remplis

J'ai un formulaire simple pour lequel je valide le côté client pour . Pour valider, aucun des champs ne doit être laissé vide .

function validateForm() {
  $('.form-field').each(function() {
    if ( $(this).val() === '' ) {
      return false
    }
    else {
      return true;
    }
  });
}

Pour une raison quelconque, ma fonction renvoie toujours false, même si tous les champs sont remplis.

javascriptjqueryformsvalidation
10
sf89

Vous ne pouvez pas renvoyer false à partir de la fonction anonyme. De plus, si cela fonctionnait, vous renverriez false si votre premier champ était vide, true sinon, et ignoriez complètement le reste de vos champs. Il peut y avoir une solution plus élégante mais vous pouvez faire quelque chose comme ceci:

function validateForm() {
  var isValid = true;
  $('.form-field').each(function() {
    if ( $(this).val() === '' )
        isValid = false;
  });
  return isValid;
}

Une autre recommandation: cela nécessite que vous décoriez tous vos champs de formulaire avec cette classe formfield. Vous pouvez être intéressé par le filtrage à l'aide d'un sélecteur différent, par exemple. $('form.validated-form input[type="text"]')

EDIT Ah, je me suis fait battre, mais mon explication est toujours valable et, espérons-le, utile.

29
Guttsy

Vous reveniez de la fonction interne et non de la méthode validate

Essayer

function validateForm() {
    var valid = true;
    $('.form-field').each(function () {
        if ($(this).val() === '') {
            valid = false;
            return false;
        }
    });
    return valid
}
4
Arun P Johny
function validateForm() {
    var invalid= 0;
    $('.form-field').each(function () {
        if ($(this).val() == '') {
            invalid++;
        }
    });

   if(invalid>0)
       return false;
   else
       return true;
}
1
Irfan TahirKheli

Voici une approche similaire:

function validateForm() {
  var valid = true;
  $('.form-field').each(function() {
    valid &= !!$(this).val();
  });
  return valid;
}

!! convertit simplement la valeur d'entrée en bool

0
delagics