Discussion :

[Momodughetts]

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);
});

[psychadelic]

et que comment il est fait ton formulaire coté html ?
?????????????????????????

[Momodughetts]

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>

[psychadelic]

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()" >

[Momodughetts]

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

[Doksuri]

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

[psychadelic]

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>