Discussion :

[Fredy007]

Bonjour,

J'ai un formulaire que j'appelle via ajax, lors de la validation avec la méthode bootstrap, le navigateur se recharge.

Normalement avec ce genre de formulaires (rechargé depuis ajax), j'utilise la méthode suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$(document).on('click', '.btn-primary', function () {
    alert('clicked');
    return false;
});

Parce que la méthode normale, recharge le navigateur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
// cette méthode recharge le navigateur si le formulaire est appelé depuis ajax
$('.btn-primary').on('click', function () {
    alert('clicked');
    return false;
});

Comment puis je change ce code pour qu'il marche avec document:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(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);
})();
</script>

Merci à vous

[SpaceFrog]

le bouton est de type submit?
remplace le par un type button ...

[Fredy007]

Quand je le remplace avec 'button' je ne reçois pas des messages d'erreur comme sur la documentation:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="invalid-feedback">
        Please provide a valid city.
      </div>

[SpaceFrog]

button ??? quelle balise html je parlais du type du bouton...

[Fredy007]

C'est ce que j'ai fait:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="btn btn-primary" type="submit" style="width: 80%;">Submit form</button>

Est remplacé par:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="btn btn-primary" type="button" style="width: 80%;">Submit form</button>

[ProgElecT]

Salut

C'est ce que j'ai fait:
.....

Et cela a résolu ton problème ?

[SpaceFrog]

Si cela n'a pas résolu ton problème essaye :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input class="btn btn-primary" type="button" style="width: 80%;" value="Submit form" />