1
votes

Vérifiez que l'entrée a une valeur sur chaque élément de classe, puis basculez la classe désactivée jQuery

J'essaye de vérifier les valeurs de chaque élément d'entrée dans mon formulaire. Ça ne fonctionne pas. Quelqu'un peut-il m'aider ce que je fais mal ici? Merci

function formIsInvalid() {
  var flag = false,
    name, date;
  $('.form--group').each(function() {

    name = $(this).find('.thename').val();
    date = $(this).find('.date_of_birth').val().length == 10;
    if (name == "" || date == "") {
      flag = true;
    }
  });
  return flag
}

//Toggle disbaled class
$('.form--group').on('keyup','input', function() {
  //use other static element or document if not works
  $('#stepbirth').toggleClass('disabled', formIsInvalid());
});

<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>

javascript jquery html

5 commentaires

date est un booléen, donc date == "" ne sera jamais vrai

Utilisez if (! Name ||! Date) , et utilisez des noms appropriés, c'est-à-dire que votre fonction doit être appelée formIsInvalid , et non checkStatus .

Cela n'a pas fonctionné :(

cette ligne m'est très étrange: date = $ (this) .find ('. date_of_birth'). val (). length == 10; pourquoi le but de == 10?

@Zain: J'ai mal compris la demande et j'ai mis à jour ma réponse ci-dessous

3 Réponses :

-2
votes

Vous pouvez désactiver le bouton si vous trouvez au moins un champ vide.

Quelque chose comme

var emptyFields = $('.form--group input:text').filter(function() { return this.value.length == 0; });
$(#button).toggleClass('disabled',emptyFields.length > 0);

1 commentaires

EDIT: j'avais compris que vous vouliez désactiver le groupe de formulaires et non le bouton.

1
votes

Vous pouvez utiliser la méthode .trim () pour supprimer tout l'espace libre au début de la valeur. Et vérifiez si la valeur existe.

EXEMPLE EN DIRECT: https://codepen.io/miladfm/pen / ZgKqNm

HTML

function formIsInvalid() {
  var isFormInvalid = false;
  $('.form--group').each(function() {

    var name = $(this).find('.thename').val();
    var date = $(this).find('.date_of_birth').val();

    if (!name.trim() || !date.trim()) {
      isFormInvalid = true;
    }
  });

  return isFormInvalid
}

$('.form--group').on('keyup','input', function() {
  $('#stepbirth').toggleClass('disabled', formIsInvalid());
});

#stepbirth.disabled {
  color: #999;
}

<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>

2 commentaires

obtention de cette erreur. TypeError non intercepté: impossible de lire la propriété 'trim' de undefined

voir ce lien: codepen.io/miladfm/pen/ZgKqNm . il n'y a pas d'erreur dans cet exemple

0
votes

Puisqu'il n'y a pas de propriété désactivée intégrée pour l'élément 'a', vous devez créer un style pour cela comme indiqué ci-dessous.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>

<script>
function formIsInvalid() {
  var flag = false, name, date;
  $('.form--group').each(function() {
    if (flag) return;
    name = $(this).find('.thename').val();
    date = $(this).find('.date_of_birth').val();
    date = date !== undefined && date.length == 10;
    flag = !name || !date;
  });
  return flag
}

//Toggle disbaled class
$('.form--group').on('keyup','input', function() {
  $('#stepbirth').toggleClass('disabled', formIsInvalid());
});
</script>
</body>
</html>

a.disabled {
  pointer-events: none;
  cursor: default;
}

7 commentaires

Il ne fonctionne pas correctement, lorsque toutes les valeurs sont remplies et supprimées du premier champ de saisie, le bouton reste activé.

@Zain Auparavant, il vérifiait si l'un des groupes de formulaires est valide. Maintenant, j'ai mis à jour le code. Merci de l'avoir signalé.

Merci pour la mise à jour. Cela semble fonctionner ici, lorsque j'ai placé ce code dans le fichier js, j'ai obtenu cette erreur. Uncaught TypeError: Impossible de lire la propriété 'length' de undefined

@Zain Cela se produit si l'un de vous forme - groupe n'a pas la classe spécifiée. J'ai également mis à jour le code pour cela. :) J'espère que cela résout votre problème.

Cette erreur a disparu. Merci. Mais je ne sais toujours pas ce qui est incorrect dans ma classe de code désactivé non basculé :(

Je vous ai invité dans la salle my_public_chat . Nous pouvons en discuter plus loin.

continuons cette discussion dans le chat .