IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

JavaScript Discussion :

Validation de formulaire


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Femme Profil pro
    Développeur Web
    Inscrit en
    Juin 2018
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2018
    Messages : 56
    Par défaut Validation de formulaire
    Bonjour j'ai un problème, je fait une validation de formulaire en Javscript pour afficher une div erreur lorsque l'utilisateur rempli le formulaire, j'aimerais que si une erreur s'affiche le formulaire ne s'envoie pas, or il s'envoie toujours. Quelqu'un peu m'expliquer pourquoi ? Merci
    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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    function afficheErreur(champ, erreur){
        var blocErreur = $(champ).parent('li').children('.Erreur');
        if(erreur){
            blocErreur.show();
        }else{
            blocErreur.hide();
        }
    }
    function verifMessage(){
        var message = this.value;
        if(message === "" || this.value.length <= 5){
          afficheErreur(this, true);
          return false;
        }else{
            afficheErreur(this, false);
            return true;
        }
    }
    function verifForm(){
       var nomOk = verifNom.bind(this.nom);
       var mailOk = verifMail.bind(this.mail);
       var numeroOk = verifNumero.bind(this.number);
       var messageOk = verifMessage.bind(this.message);
       if(!nomOk || !mailOk || !numeroOk || !messageOk){
       event.preventDefault();
       }else{
       }
    }
    console.log(verifForm)
    $(function(){
    $('#messageForm').submit(verifForm);
    $('[name="nom"]').blur(verifNom);
    $('[name="mail"]').blur(verifMail);
    $('[name="message"]').blur(verifMessage);
    $('[name="number"]').blur(verifNumero);
    });

  2. #2
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    et que comment il est fait ton formulaire coté html ?
    ?????????????????????????

  3. #3
    Membre averti
    Femme Profil pro
    Développeur Web
    Inscrit en
    Juin 2018
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2018
    Messages : 56
    Par défaut
    Ben c'est un formulaire normal avec un bouton submit quoi. Mes div s'affiche bien en erreur quand j'en fait mais il s'envoie quand même donc c'est soit ma fonction verifForm qui bloque soit ma condition if, mais j'ai beau tourner le code dans tout les sens rien n'y fait
    Code html : 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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <form method="post" action="ControllerFormulaire.php" id="messageForm">
                        <fieldset>
                                <legend>Nous contactez</legend>
                            <ul>
                                <li>
                                    <div class="Erreur">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                        Veuillez remplir ce champ
                                    </div>
                                    <label for="name">Votre nom : </label>
                                    <input type="text" name="nom" class="name">
                                </li>
                                <li>
                                    <div class="Erreur">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                        Veuillez entrez une adresse mail valide
                                    </div>
                                    <label for="name">Votre email : </label>
                                    <input type="text" name="mail" class="mail">
                                </li>
                                <li>
                                    <div class="Erreur">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                        Veuillez entrez un numéro valide
                                    </div>
                                    <label for="name">Votre téléphone : </label>
                                    <input type="text" name="number" class="number">
                                </li>
                                <li>
                                    <div class="Erreur">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                        Veuillez remplir ce champ
                                    </div>
                                    <label for="name">Votre message : </label>
                                    <textarea colspan="3" name="message"></textarea>
                                </li>
                                <li>
                                    <input type="submit" value="Envoyer" name="submit" class="submit">
                                </li>
                            </ul>
                        </fieldset>
                    </form>

  4. #4
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    C'est bien ce que je pensais
    ton html est incomplet
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <form method="post" action="ControllerFormulaire.php" id="messageForm"  onsubmit="return validateForm()" >

  5. #5
    Membre averti
    Femme Profil pro
    Développeur Web
    Inscrit en
    Juin 2018
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2018
    Messages : 56
    Par défaut
    Alors je m'y attendais mais non j'ai pas le droit d'utiliser ça. Pourquoi ? je rend mon projet de fin de formation. Le "onsubmit()" est une technique qu'on utiliser en 1995 et l'utilisation du Javascript dans du html est carrément déprécié limite interdite. D'où mon gros blocage. Si je met ça dans mon projet on m'envoie chier direct

  6. #6
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 494
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 494
    Par défaut
    Citation Envoyé par Momodughetts Voir le message
    Le "onsubmit()" est une technique qu'on utiliser en 1995 et l'utilisation du Javascript dans du html est carrément déprécié limite interdite.
    on utilise l'orthographe/conjugaison depuis bien avant, et ce n'est toujours pas deprecated

    sinon, tu peux toujours passer par un eventListener
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('messageForm').addEventListener('submit', validateForm);

    edit : verifier s'il faut utiliser le preventDefault
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  7. #7
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Perso j'utilise plus du tout les formulaires, si j'ai des données en saisie et transmettre j'utilise de l'ajax et je gère l'évolution de l'ihm en js.

    mais bon dans ce cas utilise document.form.submit();.

    mais faut remplacer le :
    <input type="submit" value="Envoyer" name="submit" class="submit"> ,

    par un bouton :
    <input type="button" value="Envoyer" name="submit" class="submit"> .

    exemple
    Code html : 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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="UTF-8">
      <title>test formulaire</title>
    </head>
     
    <body>
     <form id="superForm" method="post" name="superForm" action="xyz.php">
        <input type="text" name="fname" id="test" />
        <input id="btSubmit" type="button" value="Submit" />
      </form>
     
      <script src=".........jquery.min.js"></script>
      <script>
        jQuery(function ($) {
     
          $('#btSubmit').on('click', function() {
            var xtest = $('#test').val();
     
            if (xtest == null || xtest == "" || xtest == "rien") {
              alert("j'envoi pas rien !");
            }
            else
              $("#superForm").submit();  // ou   document.form.submit();
            });
        });
      </script>
    </body>
    </html>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Validation de formulaire en javascript et envoi en PHP
    Par Knutt dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 20/02/2011, 22h09
  2. Réponses: 4
    Dernier message: 20/02/2011, 12h32
  3. valider un formulaire avec javascript
    Par x2thez dans le forum jQuery
    Réponses: 9
    Dernier message: 29/06/2009, 20h51
  4. [W3C] Problème validation w3c avec html/javascript
    Par mademoisellem dans le forum Balisage (X)HTML et validation W3C
    Réponses: 22
    Dernier message: 31/01/2008, 16h19
  5. Validation de formulaire en javascript
    Par crocodingo dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 02/05/2007, 17h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo