Validation de formulaire

**Momodughetts** · 19/06/2018, 14h43

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** · 19/06/2018, 15h33

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

**Momodughetts** · 19/06/2018, 15h36

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** · 19/06/2018, 15h43

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** · 19/06/2018, 15h49

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** · 19/06/2018, 16h55

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 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** · 19/06/2018, 17h06

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>

**psychadelic** · 19/06/2018, 17h36

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... ?

**Momodughetts** · 19/06/2018, 18h36

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

**Momodughetts** · 19/06/2018, 18h38

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

**NoSmoking** · 19/06/2018, 18h41

Bonjour,

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 :

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

$('#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 :

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

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

**Momodughetts** · 19/06/2018, 18h51

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 :

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

**NoSmoking** · 19/06/2018, 19h28

Si tout ton code est là alors il manque quelque chose, je m'explique, avec ce bout de code

Code :

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

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 :

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

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.

**Momodughetts** · 19/06/2018, 19h45

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"

**NoSmoking** · 20/06/2018, 11h39

Tu aurais également faire un appel direct à tes fonctions

Code :

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

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 :

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

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

et en ayant une fonction de ce type

Code :

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

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

**Momodughetts** · 20/06/2018, 18h32

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

Validation de formulaire

JavaScript

Discussions similaires

Partager

Partager