Bonjour,

J'aimerais pouvoir faire en sorte que mon modal ne s'affiche pas si le formulaire n'est pas valide.

Voici le bouton submit qui permet d'envoyer le formulaire et le modal lié avec.

<button type="submit" class="btn btn-primary" name="valider" value="Confirmation" id="subBtn" data-toggle="modal" data-target="#myModal">Confirmation</button> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" name="modalBtn">
(...)
</div>

Voici la fonction qui permet de vérifier le formulaire :

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === true) { 
		alert("Form OK"); 
		}
		else {
          event.preventDefault();
          event.stopPropagation(); $("#myModal).modal("hide");
}

form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

modal.('hide') ne marche pas, quelqu'un aurait-il une solution ?

Merci d'avance.

-
Edité par Snowman912 30 juin 2020 à 15:00:28

Bonjour,

Si le code que tu nous a montrés est bien le même que celui qui te pose problème, il te manque un guillemet ligne 12 dans ton sélecteur Jquery.

Ah oui merci c'est vrai

Cependant le modal s'ouvre toujours même en cas d'erreur

-
Edité par Snowman912 30 juin 2020 à 20:11:13

Salut ! 

https://getbootstrap.com/docs/4.4/components/forms/#validation

Ca devrait répondre au problème

Mon <form> contient déjà la classe needs-validation et l'attribut novalidate si c'est cela que tu voulais me montrer sur la page. Mon code de vérification et mon form viennent de cette page.