Validation de formulaire

Version imprimable

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:

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

19/06/2018, 15h33
psychadelic

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

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:

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>

19/06/2018, 15h43
psychadelic

C'est bien ce que je pensais
ton html est incomplet

Code:

<form method="post" action="ControllerFormulaire.php" id="messageForm" onsubmit="return validateForm()" >
19/06/2018, 15h49
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
19/06/2018, 16h55
Doksuri

Citation:

Envoyé par Momodughetts

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:

document.getElementById('messageForm').addEventListener('submit', validateForm);

edit : verifier s'il faut utiliser le preventDefault

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:

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>

19/06/2018, 17h36
psychadelic

Si tu utilises <input type="submit" ... et que tu veuille faire une validation de ton formulaire pour le valider ,
alors tu est obligé d'utiliser onsubmit="return validationFormulaire()"événtuelement avec la méthode proposée par Doksuri mais j'ai un doute.

en tout cas ça marche par paire, et ça m’étonnerai que cette technique soit vraiment obsolète, il n'y a aucune trace de cela sur la doc officielle du W3C
( https://www.w3.org/TR/html401/intera...#adef-onsubmit ) ou alors j'ai mal cherché, et dans ce cas j'aimerai bien avoir une telle référence.

Ceci étant j'ai vu aussi qu'il y avait un nouvel attribut novalidate pour les formulaires, et je vois pas trop à quoi il peut servir... ?
19/06/2018, 18h36
Momodughetts

Ahah désolé pour mon écriture.. Moi je sais que mon école n'aime pas du tout ça, alors sincèrement à part le fait que ça soit une ancienne technique, je peut pas vous donnez plus de raisons valables. je vais essayer ce que vous m'avez dit, mais j'avais déjà essayer l'eventlistener ça n'avais pas marcher je vais voir ça de suite si ça se règle ou pas. Après passez par l'ajax ça pourrait être une bonne solution mais faudrait que je change tout mon code alors si je peut éviter ça serait pas mal lol
19/06/2018, 18h38
Momodughetts

Et j'avoue ne pas comprendre non plus l'utilité de "no validate"

Bonjour,

Citation:

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.

non il s'agit simplement de séparer les différentes couches, HTML, CSS et JS mais rien n'interdit de le faire !

Mais quoiqu'il arrive tu as déjà géré l'affectation de l'événement, voir code initial

Code:

$('#messageForm').submit(verifForm);

Il est important de savoir que si tu as une erreur dans ton code bye-bye le script donc il est possible que tu ais une erreur qui traine dans ton script et comme on n'a pas la totalité, ex:
Code:

1 2 3 4 5 $('#messageForm').submit(verifForm); $('[name="nom"]').blur(verifNom); // pas le code $('[name="mail"]').blur(verifMail); // pas le code $('[name="message"]').blur(verifMessage); $('[name="number"]').blur(verifNumero); // pas le code
difficile de dire donc !

Rappel : Il est IMPERATIF de faire les vérifications côté serveur

Alors oui évidemment que j'ai mon controller php ! Mais c'est pour la facilité utilisateur et le visuel que je passe avant par une validation JS. Mes autres fonctions marche puisque ma div erreur s'affiche bien quand je fait des erreurs ect, je me demande si c'est pas le bind qui fait que ma condition if ne passe pas ? Quand bien même pour être sur voici le code entier :

Code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
'use strict';
 
function afficheErreur(champ, erreur){
    var blocErreur = $(champ).parent('li').children('.Erreur');
    if(erreur){
        blocErreur.show();
    }else{
        blocErreur.hide();
    }
}
function verifNom(){
   if(this.value.length < 2 || this.value.length > 25 || this.value === ""){
      afficheErreur(this, true);
      return false;
    } else{
      afficheErreur(this, false);
      return true;
   }
 
}
function verifMail(){
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,6}$/;
   if(!regex.test(this.value)){
      afficheErreur(this, true);
      return false;
   }else{
      afficheErreur(this, false);
      return true;
   }
}
function verifNumero(){
    var number = this.value;
    if(number === "" || this.value.length != 10){
      afficheErreur(this, true);
      return false;
    }else{
        afficheErreur(this, false);
        return true;
    }
}
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(event){
   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{
   }
}
$(function(){
$('#messageForm').submit(verifForm);
$('[name="nom"]').blur(verifNom);
$('[name="mail"]').blur(verifMail);
$('[name="message"]').blur(verifMessage);
$('[name="number"]').blur(verifNumero);
});

19/06/2018, 19h28
NoSmoking
Si tout ton code est là alors il manque quelque chose, je m'explique, avec ce bout de code

Code:

var nomOk = verifNom.bind(this.nom);

tu crées une fonction nomOK qui aura comme contexte this.nom, au passage c'est pas terrible comme référence au champ nom.

Une fois ta fonction déclarée tu ne l'appelles pas !?!

Il te faut pour que cela fonctionne et que tes fonctions soient appelées écrire à minima
Code:

1 2 3 4 if (!nomOk() || !mailOk() || !numeroOk() || !messageOk()) { event.preventDefault(); } else {}
Nota : je ne vois pas l’intérêt dans ton cas d'utiliser bind.
19/06/2018, 19h45
Momodughetts

J'arrive pas a croire que j'ai bloquer sur une erreur aussi bête mon dieu j'ai tourner le code dans tout les sens, changer de fonction plusieurs fois sans jamais rajouter les parenthèses à "nomOk" ect.. Je me sens vraiment idiote mais j'y ai vraiment pas pensée. Alors j'utilisez le bind pour "this" car sinon ça me faisait "this is undefind"

Tu aurais également faire un appel direct à tes fonctions

Code:

1
2
3
4
5
6
7
8
9
10
11
function verifForm(event){
   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()){
   if(!nomOk || !mailOk || !numeroOk || !messageOk){   
     event.preventDefault();
   }else{
   }
}

ou encore de te passer du « bindins » en passant à la fonction l'élément jQuery

Code:

var nomOk = _verifNom( $('[name="nom"]'));

et en ayant une fonction de ce type

Code:

1
2
3
4
5
6
7
8
9
10
function _verifNom( obj){
  var text = obj.val();
  if(text.length < 2 || text.length > 25 || text === ""){  // NOTA : text ==="" => text.length < 2
      afficheErreur(obj, true);
      return false;
    } else{
      afficheErreur(obj, false);
      return true;
   }
}

mais bon cela entrainerait une modification de tes appels à l'initialisation

20/06/2018, 18h32
Momodughetts

Génial merci pour tes différents exemples !!