Vérifier plusieurs input

emrh Messages postés 439 Statut Membre -  
Misterlolo57 Messages postés 12 Date d'inscription   Statut Membre Dernière intervention   -

Bonjour à tous,

Existe t-il un moyen simple et efficace de vérifier que certains input sont bien renseignés pour activer ou non un button ?
J'ai écris une fonction qui n'est pas fiable puisque lorsque j'efface le contenu d'un des input le button reste actif !

(Précision, ce button n'est pas celui qui valide le formulaire)

function activeBtnTs() {
    var vide = 0;
    for (i = 1; i <= dureeSejour; i++) {
        if (document.getElementById('adultes' + i).value == 0) {
            vide = vide + 1;
        }
        if (document.getElementById('exo' + i).value == 0) {
            vide = vide + 1;
        }
    }
    if (vide == 0) {
        var btnTs = document.getElementById("button-ts");
        if (btnTs) {
            btnTs.classList.remove("btn-vert-disabled");
            btnTs.classList.add("btn-vert");
            btnTs.disabled = false;
        }
    }
}

Merci d'avance pour votre aide !
Linux / Chrome 107.0.0.0

2 réponses

  1. emrh Messages postés 439 Statut Membre 20
     

    Du mieux avec ça, mais ça me semble très usine à gaz ! 

    function activeBtnTs(){
        var vide=0;
        for (i = 1; i <= dureeSejour; i++) {                    
            if(document.getElementById('adultes'+i).value == ''){
                vide = vide + 1;
            }
            if(document.getElementById('exo'+i).value == ''){
                vide = vide + 1;
            }
        }
        if(vide==0){
            var btnTs = document.getElementById("button-ts");
            if(btnTs){
                btnTs.classList.remove("btn-vert-disabled");
                btnTs.classList.add("btn-vert");
                btnTs.disabled = false;
            }
        }
        else {
            desactiveBtnTs();
        }
    }
    
    function desactiveBtnTs(){
        var btnTs = document.getElementById("button-ts");
        if(btnTs){
            btnTs.classList.add("btn-vert-disabled");
            btnTs.classList.remove("btn-vert");
            btnTs.disabled = true;
        }
    } 
    0
  2. Misterlolo57 Messages postés 12 Date d'inscription   Statut Membre Dernière intervention   10
     

    tu peux utiliser une boucle for pour parcourir tous les inputs et vérifier si leur valeur est vide ou non. Si tous les inputs ont une valeur non vide, tu peux activer le bouton en modifiant ses propriétés.

    Exemple :

    function activeBtnTs() {
      // Récupération de tous les inputs
      var inputs = document.querySelectorAll('input[id^="adultes"], input[id^="exo"]');
      var inputsFilled = true;
    
      // Parcours de tous les inputs
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].value === '') {
          // Si un input est vide, la variable inputsFilled prend la valeur false
          inputsFilled = false;
          break;
        }
      }
    
      // Si tous les inputs sont remplis
      if (inputsFilled) {
        // Récupération du bouton
        var btnTs = document.getElementById("button-ts");
        if (btnTs) {
          // Modification des propriétés du bouton pour l'activer
          btnTs.classList.remove("btn-vert-disabled");
          btnTs.classList.add("btn-vert");
          btnTs.disabled = false;
        }
      }
    }

    0