J'apprends à faire la validation de formulaire sur différents types d'éléments et je veux le faire uniquement en Javascript. J'ai des cases à cocher ici et une fonction Javascript qui vérifie si les cases à cocher ont au moins une option sélectionnée lors de la soumission du formulaire. Fondamentalement, les cases à cocher doivent apparaître en rouge si aucune option n'est sélectionnée. Mais je reçois l'erreur:

TypeError non capturé: impossible de définir la propriété 'borderColor' de undefined

function validate() {
  var ok = true;
  var yes = document.getElementById("yes").checked
  var no = document.getElementById("no").checked;

  if (!yes && !no) {
    document.getElementsByClassName(".btn-group").style.borderColor = "red";
  }

  return ok;
}
<div data-toggle="buttons" class="btn-group">
  <label class="btn active">
    <input id = "yes" type="checkbox" name="box" value="yes" />
    </i>Yes
  </label>

  <label class="btn active">
    <input id = "no" type="checkbox" name="box" value="no" />No
  </label>
</div>
1
kevin_b 9 août 2016 à 18:51

3 réponses

Meilleure réponse

Il y a là quelques problèmes:

  1. Si vous utilisez getElementsByClassName, vous devez utiliser le nom de classe sans le point.
  2. La propriété style est pour l'élément (tandis que getElementsByClassName renvoie une liste des éléments).
  3. Si vous ne définissez que la couleur de la bordure (et non le style et la largeur), il n'y aura pas de bordure.

Voici la correction:

function validate() {
  var ok = true;
  var yes = document.getElementById("yes").checked
  var no = document.getElementById("no").checked;

  if (!yes && !no) {
    ok = false;
    document.getElementsByClassName("btn-group")[0].style.border = '1px solid red';
  } else {
    document.getElementsByClassName("btn-group")[0].style.border = '';
  }
  return ok;
}
<div data-toggle="buttons" class="btn-group">
  <label class="btn active">
    <input id = "yes" type="checkbox" name="box" value="yes" />
    Yes
  </label>

  <label class="btn active">
    <input id = "no" type="checkbox" name="box" value="no" />No
  </label>
</div>

<button onclick="validate()">Validate</button>
3
Dekel 9 août 2016 à 16:06

Vous devez ajouter ou supprimer une classe au groupe de boutons afin de masquer afficher la bordure. Ajoutez ou supprimez simplement la classe lorsque la validation change.

En outre, vous devez soit parcourir toutes les classes de groupes de boutons, soit en choisir une.

Remarque : J'ai utilisé les méthodes de classe de Vous pourriez ne pas avoir besoin de jQuery .

function validate() {
  var btnGroups = document.getElementsByClassName("btn-group");

  for (var i = 0; i < btnGroups.length; i++) {
    var btnGroup = btnGroups[i];
    var yes = document.getElementById("yes")['checked'] == true;
    var no = document.getElementById("no")['checked'] == true;

    if (!yes && !no) {
      if (!hasClass(btnGroup, 'invalid')) addClass(btnGroup, 'invalid');
      return false;
    } else {
      if (hasClass(btnGroup, 'invalid')) removeClass(btnGroup, 'invalid');
    }
  }

  return true;
}

function hasClass(el, className) {
  if (el.classList) return el.classList.contains(className);
  else return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

function addClass(el, className) {
  if (el.classList) el.classList.add(className);
  else el.className += ' ' + className;
}

function removeClass(el, className) {
  if (el.classList) el.classList.remove(className);
  else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
.btn-group.invalid {
  border : thin solid red;
}
<div data-toggle="buttons" class="btn-group">
  <label class="btn active">
    <input type="checkbox" id="yes" name="box" value="yes" onchange="validate()" />Yes
  </label>

  <label class="btn active">
    <input type="checkbox" id="no" name="box" value="no" onchange="validate()" />No
  </label>
</div>
0
Mr. Polywhirl 9 août 2016 à 16:17

getElementsByClassName() Renvoie une collection d'éléments, vous devez donc parcourir le résultat pour vous assurer d'appliquer la modification de style à chaque élément.

De plus, vous devez utiliser la méthode element.setAttribute() pour changer le style comme ceci:

element.setAttribute("style","border-color: red");

La combinaison de ces deux éléments devrait vous donner le résultat souhaité.

Edit: vous n'avez pas à utiliser setAttribute() si vous ne le souhaitez pas, comme l'a souligné Neal. La chose importante à emporter est que vous devez parcourir votre collection.

Modifier 2: En examinant à nouveau votre code, j'ai remarqué que lorsque vous appelez document.getElementsByClassName(".btn-group").style.borderColor = "red";, vous ne récupérez pas les cases à cocher, vous obtenez une collection de divs de classe btn-group, donc vous ' re essayant en fait de définir la couleur de la bordure du div pour être rouge, pas les cases à cocher. Vous retournez également true sans condition à la fin de validate().

Si vous ne cochez que ces 2 cases, vous pouvez simplement utiliser les id pour les modifier:

function validate() {
  var ok = true;
  var yes = document.getElementById("yes").checked
  var no = document.getElementById("no").checked;

  if (!yes && !no) {
    document.getElementById("yes").setAttribute("style","border-color: red");
    document.getElementById("no").setAttribute("style","border-color: red");
    // no checkbox selected, validation should fail and return false
    return !ok;
  } else {
    // checkbox selected, validation should pass and return true
    return ok;
  }
}
1
NAMS 9 août 2016 à 16:42