vérification de formulaire

**tonytrua** · 28/06/2012, 11h17

Bonjour,
J'ai créer un formulaire et je souhaite le vérifier avec du javascript , chose que j'ai faite mais je voudrai aussi que le formulaire ne s’envoie pas si un champs n'est pas correctement remplie .
Mon problème est que quoiqu'il arrive le formulaire est envoyé

code js

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
 
 
function verifMail(champ)
{
    var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
    if(!regex.test(champ.value))
    {
        surligne(champ, true);
        write("<SPAN style='position:absolute;left:500px;top:500px;'>ERREUR</SPAN>'");
        return false;
    }
 
    else
    {
        surligne(champ, false);
        return true;
    }
}
 
function surligne(champ, erreur)
{
    if(erreur)
 
        champ.style.backgroundColor = "#fba";
    else
        champ.style.backgroundColor = "";
}
function verifAge(champ)
{
    var age = parseInt(champ.value);
    if(isNaN(age) || age < 5 || age > 111)
    {
        surligne(champ, true);
        return false;
    }
    else
    {
        surligne(champ, false);
        return true;
    }
}
function verifVide(champ)
{
 
    var regex = /\s* /;
    if(regex.test(champ.value))
    {
        surligne(champ, true);
        return false;
    }
    else
    {
        surligne(champ, false);
        return true;
    }
}
function verifForm()
{
    if(mail.value==ReMail.value&&password.value==ConfPass.value&&verifMail(mail)==true&&verifMail(ReMail)==true&&verifVide(password)==true&&verifVide(ConfPass)==true)
    {
        return true
        }else{
        return false
    }
}

formulaire

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
<body>
        <div id="form" style="position:absolute;left:420px;top:160px;z-index:10; "><pre><form METHOD=POST onsubmit="verifForm()" ACTION="traitement.jsp" >
 
                <U><BR><BR><CENTER>INSCRIPTION</CENTER></U>
				<BR>
                                <%if(request.getParameter("erreur")!=null){out.print(request.getParameter("erreur"));}%><BR><BR>
Adresse mail :<input name="Mail" value=" "onblur="verifMail(this)"><BR><BR>
Confirmation adresse mail :<input name="ReMail" value=" " onblur="verifMail(this)"><BR><BR>
Nom:      <input name="Nom" value=" " onblur="verifVide(this)"><BR><BR>
Prenom: <input name="Prenom" value=" " onblur="verifVide(this)"> <BR><BR>	
Age: <input name="Age" value=" " size="3"onblur="verifAge(this)"><BR><BR>
Sexe<input type="radio" name="Sexe" value="M" checked> Homme
<input type="radio" name="Sexe" value="F">Femme<BR><BR>
Pays :<input name="Pays" value=" " size="10" onblur="verifVide(this)"><BR><BR>
Adresse:      <input name="Adresse" value=" " onblur="verifVide(this)"><BR><BR>
Code postal :<input name="codePostal" value=" " size="5" onblur="verifVide(this)">     Ville :<input name="Ville" value=" " size="10" onblur="verifVide(this)"><BR><BR>
Mot de passe:<TD><input type="password" name="Password" onblur="verifVide(this)"><BR><BR>
Repeter mot de passe:<input type="password" name="ConfPass" onblur="verifVide(this)">
<BR><BR>
<INPUT type=hidden name=afficher value=ok>       
 
 
	<input type="submit" value="Valider">

Merci d'avance et je n'arrive pas a trouver comment on peux définir un texte en js par exemple write("bbb") pour définir sa position couleur etc ...
J'ai essayé avec write("<SPAN style='position:absolute;left:500px;top:500px;'>Mon texte</SPAN>'"); mais cela ne marche pas. :/

**Bovino** · 28/06/2012, 11h34

Un grand classique !

Quand tu mets un attribut d'événement en HTML (onsubmit=""), JavaScript crée une fonction anonyme englobant le contenu de cet attribut.
Du coup, les return de ta fonction de vérifications renvoient le résultat à cette fonction anonyme, pas à l'événement !

Code :

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

onsubmit="return verifForm()"

fonctionnera mieux

**tonytrua** · 28/06/2012, 11h38

merci pour cette réponse

mais j'avais déjà essayé avec le return et je viens de reesayé et ça ne marche toujours pas :/
Mes champs deviennent rouge mais quand je clique sur inscription mon formulaire passe directement à la page traitement

**Bovino** · 28/06/2012, 11h48

Arggggg !!!

Code :

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

write("<SPAN style='position:absolute;left:500px;top:500px;'>ERREUR</SPAN>'");

Il ne faut jamais utiliser write() !!!

Comprendre document.write() en JavaScript

**tonytrua** · 28/06/2012, 12h38

Merci je comprend maintenant pourquoi

Mais comment alors afficher simplement un petit bout de texte sur ma page HTML ?

**Darkyl** · 28/06/2012, 12h56

Salut,

Mais comment alors afficher simplement un petit bout de texte sur ma page HTML ?

Tout dépend comment tu veux l'afficher et quelques technos tu utilises...
-tu peux simplement rajouter un div avec ton texte, regarde du côté de createElement.
-Tu peux passer par jquery : $('body').append('ton texte');
Mais si tu dois le positionner à un endroit particulier (ce qui doit être le cas), insere ton texte dans un div et rajoute le div de la même maniere : $('body').append('<div ..... >ton texte</div>');

Sinon, regarde du côté d'ajax et javascript: innerHTML.

**andry.aime** · 28/06/2012, 13h23

Bonjour

Envoyé par Darkyl

-Tu peux passer par jquery : $('body').append('ton texte');
Mais si tu dois le positionner à un endroit particulier (ce qui doit être le cas), insere ton texte dans un div et rajoute le div de la même maniere : $('body').append('<div ..... >ton texte</div>');

Utiliser jQuery, rien que pour ça est une très mauvaise idée.

Envoyé par Darkyl

Sinon, regarde du côté d'ajax et javascript: innerHTML.

Il ne fait pas une requête vers le serveur, donc rien à voir avec AJAX.

Le plus facile c'est de mettre directement le span dans le document avec un style display:none que l'on modifie avec style.display="inline" si on veut l'afficher et style.display="none" pour le cacher.

A+.

**Darkyl** · 28/06/2012, 13h27

Il ne fait pas une requête vers le serveur, donc rien à voir avec AJAX.

Oui, c'est vrai mais je pensais qu'il devait récupérer le texte de l'erreur sur le serveur (plusieurs textes pouvant être générés suivant l'erreur), donc moi j'ajoute un div manuelement avec createElement ou par jquery (s'il utilise déjà pour autre chose

) et je le remplis avec ajax par une requête serveur en fonction de l'erreur.

On est d'accord que jquery.append ou (html/innerHTML) est de l'ajax dissimulé?non?

J'ai toujours un peu de mal...

Le plus facile c'est de mettre directement le span dans le document avec un style display:none que l'on modifie avec style.display="inline" si on veut l'afficher et style.display="none" pour le cacher.

C'est une bonne méthode, simple, pour peu que tu n'ai qu'un span...Maintenant si tu as 10 input à vérifier, autant bien apprendre à générer dynamiquement ton rapport d'erreur, plûtot que de prévoir tout les cas possibles et créer dés le chargement de la page autant de span possible.

**Bovino** · 28/06/2012, 14h07

On est d'accord que jquery.append ou (html/innerHTML) est de l'ajax dissimulé?non?

Non, pas d'accord

Il ne faut pas confondre la modification de l'affichage (JavaScript) et l'interrogation d'un serveur pour récupérer une réponse (AJAX).

**Darkyl** · 28/06/2012, 15h37

Bovino, ok dak.

Je croyais naîvement que l'affichage dynamique était géré de la même façon que les requêtes dynamiques...mais je m'enfonce là, donc autant pour moi. Faut que je bosse un peu plus mes bases.

Dsl de dire des bêtises.

et merci Bovino de la précision.

**tonytrua** · 28/06/2012, 15h51

Bonjour , merci pour vos réponse mais je suis novice en programmation javascript , j'ai quelques notions java mais c'est tout.
Donc je reprend mes erreur donc mon formulaire fait quand même action malgré le faite qu'il retourne false du moins je pense ...
Et ensuite j'ai donc voulu caché un span
Grâce aux fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id,champ)
{ 
        if(verifVide(champ)==false)
        {
                document.getElementById(id).style.visibility="visible";
 
        }
        else if(champ==null){document.getElementById(id).style.visibility="hidden";
                }
        else{
                document.getElementById(id).style.visibility="hidden";
                }
        return true;
}

et sur ma page html , j'ai voulu caché dirrectement erreur et cela ne marche pas , c'est toujours afficher :/

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
 
<html>
    <style type="text/css">
form
{
   color: #3366FF;
 
}
B { font-size:18px; font-:bold; font-color:Red}
 
</style>
<SCRIPT language="javascript" src="verifForm.js"></SCRIPT>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
 
        <body onload="afficher_cacher(ChampReMail,null)">
        <div id="form" style="position:absolute;left:420px;top:160px;z-index:10; "><pre><form METHOD=POST onsubmit="return verifForm()" ACTION="traitement.jsp" >
 
                <U><BR><BR><CENTER>INSCRIPTION</CENTER></U>
				<BR>
                                <%if(request.getParameter("erreur")!=null){out.print(request.getParameter("erreur"));}%><BR><BR>
Adresse mail :<input name="Mail" value=" "onblur="verifMail(this)"><BR><BR>
Confirmation adresse mail :<input  name="ReMail" value=" " onblur="afficher_cacher(ChampReMail,ReMail)"> <SPAN id="ChampReMail" >erreur !!!!</SPAN>
        <BR><BR>
Nom:      <input name="Nom" value=" " onblur="verifVide(this)"><BR><BR>
Prenom: <input name="Prenom" value=" " onblur="verifVide(this)"> <BR><BR>	
Age: <input name="Age" value=" " size="3"onblur="verifAge(this)"><BR><BR>
Sexe<input type="radio" name="Sexe" value="M" checked> Homme
<input type="radio" name="Sexe" value="F">Femme<BR><BR>
Pays :<input name="Pays" value=" " size="10" onblur="verifVide(this)"><BR><BR>
Adresse:      <input name="Adresse" value=" " onblur="verifVide(this)"><BR><BR>
Code postal :<input name="codePostal" value=" " size="5" onblur="verifVide(this)">     Ville :<input name="Ville" value=" " size="10" onblur="verifVide(this)"><BR><BR>
Mot de passe:<TD><input type="password" name="Password" onblur="verifVide(this)"><BR><BR>
Repeter mot de passe:<input type="password" name="ConfPass" onblur="verifVide(this)">
<BR><BR>
<INPUT type=hidden name=afficher value=ok>       
 
 
	<input type="submit" value="Valider">
 
 
            </form></pre>	</div>		 
    </body>
</html>

Merci d'avance pour votre aide

**andry.aime** · 29/06/2012, 07h07

Re,

onblur="afficher_cacher(ChampReMail,ReMail)"

Code :

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

 onblur="afficher_cacher('ChampReMail','ReMail')"

Ensuite, visibility prend des valeurs booléen en javascript.

A+.

**tonytrua** · 01/07/2012, 00h39

Merci pour votre aide mais pour visibility alors il faut mettre true et false au lieu de visible et hidden?
Et mon problème vient du faite que la fonction ne retourne pas false mais je ne comprend vraiment pas pourquoi :/