Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Validation du formulaire appelé via Ajax


Sujet :

jQuery

  1. #1
    Membre du Club
    Validation du formulaire appelé via Ajax
    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

  2. #2
    Rédacteur/Modérateur

    le bouton est de type submit?
    remplace le par un type button ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre du Club
    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>

  4. #4
    Rédacteur/Modérateur

    button ??? quelle balise html je parlais du type du bouton...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Membre du Club
    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>

  6. #6
    Rédacteur/Modérateur

    Salut
    Citation Envoyé par Fredy007 Voir le message
    C'est ce que j'ai fait:
    .....
    Et cela a résolu ton problème ?
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  7. #7
    Rédacteur/Modérateur

    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" />
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

###raw>template_hook.ano_emploi###