web-dev-qa-db-fra.com

Comment désactiver bootstrap 4 style de validation à partir de contrôles valides

J'utilise bootstrap 4 style pour mon application. L'application a deux zones de texte et un bouton d'envoi. Lorsque vous cliquez sur le bouton "Enregistrer", elle appelle une API Web et obtient des détails de manière asynchrone ( il ne redirigera pas la page.) Validation appliquée pour la première zone de texte uniquement.

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
<!DOCTYPE html>
<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Test Page</title>
</head>

<body>
  <form class="container needs-validation" novalidate>
    <div class="form-group row mt-5">
      <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
      <div class="col-sm-10">
        <input type="tel" class="form-control" placeholder="Please enter your name" required />
        <div class="invalid-feedback">
          Please enter the name.
        </div>
      </div>
    </div>
    <div class="form-group row mt-5">
      <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
      <div class="col-sm-10">
        <input type="tel" class="form-control" />
      </div>
    </div>
    <div class="form-group row">
      <input type="submit" class="btn btn-primary" style="width: 100px;" value="Save" />
    </div>
  </form>
</body>

</html>

Mon problème:

Lorsque je clique sur le bouton "Enregistrer" sans entrer de valeurs dans les zones de texte, le style de couleur verte (style vrai de validation) s'applique à la zone de texte "Adresse". Je ne veux pas que cela se produise.

Je n'ai besoin que d'un style de couleur rouge (style d'échec de validation) à appliquer si la validation a échoué. Si les valeurs sont entrées (la validation est vraie), je n'ai besoin d'aucun style à appliquer aux zones de texte.

De plus, lorsque j'entre une valeur dans la zone de texte "Nom" et que je clique sur le bouton "Enregistrer", je ne veux pas de style de couleur verte pour cette zone de texte.

Capture d'écran:

Screenshot

javascriptjqueryhtmlcssbootstrap-4
5
Prabodha

Vous voudrez peut-être regarder cette réponse .

Plus précisément, au lieu d'ajouter .was-validated au formulaire entier, ajoutez seulement .is-invalid aux éléments de formulaire qui ont le :invalid pseudo-classe.

Ce code devrait fonctionner dans votre cas:

for (var i = 0; i < validateGroup.length; i++) {
    var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
    for (var j = 0; j < invalidGroup.length; j++) {
        invalidGroup[j].classList.add('is-invalid');
    }
}
1
Zac
  (function () {
    'use strict';
    window.addEventListener('load', function () {
        const forms = document.getElementsByClassName('needs-validation');
        Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                const invalidGroup = form.querySelectorAll(":invalid");
                for (let j = 0; j < invalidGroup.length; j++) {
                    invalidGroup[j].classList.add('is-invalid');
                }
            }, false);
        });
    }, false);
})();
1
user3921974

Le message de @Ilker Kadir Ozturk a fonctionné pour moi en utilisant simplement le style, sauf que ma bordure de champ valide a hérité d'une couleur antérieure (noir) que je ne voulais pas utiliser. J'utilise Bootstrap 4 et ASP.NET MVC dans une page de rasoir. Voici son code ajusté avec ma couleur (#DDDDDD). J'ai inclus mes commentaires également au-dessus des styles:

 @*  This is to prevent the green color style on Bootstrap validation to be applied to all textboxes when the info is valid.
    Only the red color style(validation failed style) should be applied if the validation failed.
    If the values are ok, no styling should be applied to the text boxes.
    Also when the "submit" button is clicked, there is no need for the green color styling to show up either.
 *@

<style>
    .form-control.is-valid:focus, .was-validated :valid.form-control {
        border-color: #DDDDDD !important;
        background-image: inherit !important;
        box-shadow: inherit !important;
    }
</style>
0
Mario Levesque