Validation de formulaire

Version imprimable

Bonjour,

Je fais mes début en JS et jaurais besoin d'un coup de main si c'est possible.
En effet, je bloque sur un truc concernant la validation de formulaire

J'ai le formulaire suivant
Code:

1 2 3 4 5 print "<form method=\"$method\" action=\"$action\" name=\"formSaisie\" onsubmit=\"return valider()\" >"; print "<input type=\"hidden\" name=\"rempli\" value=\"1\">"; print "Nom: <input class=\"align1\" type=\"text\" name=\"nom\" size=\"30\" maxlength=\"30\" value=\"$nom\"/><br />"; <input type="submit" name="inscription" value = "Inscription" />
Le code de ma fonction valider qui validera le champ nom
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function valider(){ alert("Je suis dans valider"); elt = document.forms['formSaisie'].elements['nom']; alert(elt); if(elt.value != "") { alert("ca marche"); return true; } else { alert("Saisissez le nom"); return false; } }
J'ai bien inclut mon .js dans le header de mon code HTML
Code:

1 2 <script type="text/javascript" src="/js/ValidationInscription.js"></script>
Il ne se passe rien quand je clique sur le bouton, j'ai ajouté pleins de tests et d'affichages désespéré sans succès mon code trouve bien le .js appelle la fonction et afficher le "Je suis dans valider" sans plus, je soupçonne le document.forms['formSaisie'].elements['nom'];

Est ce que c'est la bonne manière de chercher le contenu de mon champ nom ?

Je vous remercie beaucoup pour votre coup de main je sais que c'est un peu bête comme question mais j'ai l'impression de tourner en rond depuis des heures

13/11/2009, 07h51
vermine
Bonjour,

Je rajouterai des "id" sur les input et j'utiliserai cette syntaxe-ci:
Code:

1 2 var elt = document.getElementById("monId");
13/11/2009, 08h55
gwyohm

il n'y a pas de </form> dans ton code ; envoie le siource généré plutot que ton code serveur

Je vous remercie infiniment pour vos réponses

Je viens de remplacer mon code JS par le code suivant

Code HTML

Code:

1
2
3
4
5
6
7
8
9
10
print "<form method=\"$method\" action=\"$action\" name=\"formSaisie\" onsubmit=\"validerFormulaire()\" >";
print "<input type=\"hidden\" name=\"rempli\" value=\"1\">";
print "Prénom: <input class=\"align2\" type=\"text\" id=\"prenom\" name=\"prenom\" size=\"30\" maxlength=\"30\" value=\"$prenom\"/><br />";
print "Nom: <input class=\"align1\" type=\"text\" id=\"nom\" name=\"nom\" size=\"30\" maxlength=\"30\" value=\"$nom\"/><br />";
print "Courriel: <input  type=\"text\" id=\"courriel\" name=\"courriel\" size=\"50\" maxlength=\"50\" value=\"$courriel\"/> <br/>";
Nom d’usager désiré: <input type="text" id=\"usager\" name="usager" size="30" value="$usager" maxlength="30"/><br/>
Mot de passe désiré: <input class="align3" id=\"pass\" name="pass" type="password" value="$pass" size="30" maxlength="30"/><br/><br/>
 
<input type="submit" name="inscription" value = "Inscription" />      
</form>

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
function validerFormulaire()
{
    var champPrenom = document.getElementById('prenom');
    var champNom = document.getElementById('nom');
    var champCourriel = document.getElementById('courriel');
    var champUsager = document.getElementById('usager');
    var champPass = document.getElementById('pass');
    
    var forumulaireValide = false;
   
    // Si les champs sont vide on affiche un message d'erreur
    if((champPrenom.value == "") || (champNom.value == "") || (champCourriel.value == "") || 
       (champUsager.value == "") || (champPass.value == ""))
    {    
        alert("Veuillez remplir tout les champs! Merci.");
        forumulaireValide = false;
    }
    else 
    {
        forumulaireValide = true;
        alert("tout est bien fait ! Merci.");
    
    }
    if (document.getElementById('prenom').value != "") 
    {
        alert("le prenom est bien remplie ! Merci.");
        forumulaireValide = true;
    }

    alert("fin de traitement - forumulaireValide = " + forumulaireValide );
    // return forumulaireValide;
}

Si mes champs sont vide j'ai mon message "Veuillez remplir tout les champs! Merci." qui s'affiche sans soucis, ainsi que le "fin de traitement - forumulaireValide = " + forumulaireValide".
Par contre si je remplie bien mes champs, il ne m'affiche jamais le message m'indiquant que j'ai bien remplis mes champs ou bien la valeur de formulaire valide.

Dois-je faire de quoi pour réinitialiser mes variables ? ou bien je dois faire un traitement particulier ? Est ce que je faite d'avoir une vérification coté serveur (php) peut donner le genre d'erreur que jai ?

Merci encore une fois pour votre réponse :ccool:

j'ai mis ça en ligne il y a pas mal de temps
http://jeanyves.terrien.free.fr/org..../autoform.html
c'est un peu long à charger avec le menu à la mac mais le reste ça va vite

vous pouvez le pomper à volonté
http://jeanyves.terrien.free.fr/org.jquery.fast/

il faut ajouter un namespace dans l'entête du document
Code:

1 2 3 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fast="urn:org.jquery.fast" fast:includePath="js/components/">
xmlns:fast fast ici peut être remplacé par ce que vous voulez et c'est cela qu'il faut utiliser ensuite
inclure les élément nécéssaires
Code:

1 2 <script type="text/javascript" src="js/jquery-latest.js"></script> <script type="text/javascript" src="js/org.jquery.fast.js"></script>
puis dans le formulaire à valider indiquer d'on veut une validation

Code:

<form fast:class="AutoForm">

notez ici le fast: qui doit être remplacé si vous avez choisit une autre clef dans le namespace la valeur est sensible à la casse
enfin pour chaque champs choisir le type de validation
Code:

1 2 3 <input type="text" fast:checktype="phoneOrNull" id="telephone" name="telephone" value="01 56 95 81 33" size="50"> <input type="text" fast:checktype="email" id="adresse" name="adresse" value="patrick.dubois@intranet.com" size="50"> <input type="text" fast:checkereg="^@.*$" id="at" name="at" value="@machinchose" size="50">
le tout peut être facilement enrichi de nouveau type de vérification en ajoutant des méthodes à la classe
elementsmethods.js
A+JYT

Merci bien pour toutes vos réponses :ccool:

J'ai toujours des problèmes avec ma validation de formulaire

1) Le problème est que je n'arrive pas à récupérer la valeur du checkbox, la fonction est appelée mais le popup mentionnant la valeur du checkbox ne s'affiche jamais.
Ya til une manière particulière pour récupérer la valeur d'un checkbox en JS ?

2) Je n'arrive pas à récupérer la valeur du champ usager, le popup indiquant sa valeur ne s'affiche jamais

Code HTML du formulaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
print "<form method=\"$method\" action=\"$action\" name=\"formSaisie\" onsubmit=\"validerFormulaire()\" >";
print "<input type=\"hidden\" name=\"rempli\" value=\"1\">";
print "Prénom: <input class=\"align2\" type=\"text\" id=\"prenom\" name=\"prenom\" size=\"30\" maxlength=\"30\" value=\"$prenom\"/><br />";
print "Nom: <input class=\"align1\" type=\"text\" id=\"nom\" name=\"nom\" size=\"30\" maxlength=\"30\" value=\"$nom\"/><br />";
print "Courriel: <input  type=\"text\" id=\"courriel\" name=\"courriel\" size=\"50\" maxlength=\"50\" value=\"$courriel\"/> <br/>";
Nom d’usager : <input type="text" id=\"usager\" name="usager" size="30" value="$usager" maxlength="30"/><br/>
Mot de passe: <input class="align3" id=\"pass\" name="pass" type="password" value="$pass" size="30" maxlength="30"/><br/><br/>
 
<input type="checkbox" id=\"licence\" name="accepte" value="daccord"/> J'accepte les termes de la licence! 
<br/>
<input type="submit" name="inscription" value = "Inscription" />
<input type="reset" name = "Réinitialiser" value = "Reinitialiser" />

Code JS de vérification de mon formulaire

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
 
function validerFormulaire()
{
var champPrenom = document.getElementById('prenom');
var champNom = document.getElementById('nom');
var champCourriel = document.getElementById('courriel');
var champUsager = document.getElementById('usager');
var champPass = document.getElementById('pass');
var champLicence = document.getElementById('licence');
 
if((champPrenom.value != "") && (champNom.value != "") && (champCourriel.value != "") &&   (champUsager.value != "") && (champPass.value != ""))
{
 
  var licenceOK = validerAccordLisence();
 
  alert(champUsager.value);
 
}
else
{
   alert('Remplissez entièrement le fomulaire S.V.P');
}
 
}

Code:

1
2
3
4
5
6
7
8
function validerAccordLisence(){
 
      var test = document.getElementById("licence").checked;
 
    alert ("checked ="+test);
      return test;
 
}

Merci à l'attention que vous apportez à ma question :P

15/11/2009, 09h14
Bovino

Salut.

Pour ça, il faudrait nous montrer le code HTML généré, pas le PHP :roll:

Citation:

Envoyé par gwyohm

envoie le siource généré plutot que ton code serveur
16/11/2009, 03h47
Chakalaka

C'est beau c'est reglé en effet, le id d'usager devait etre id = usager est pas id=\"pass\" comme indiqué dans mon code HTML :roll:

Merci pour vos réponses :ccool:

PS: tu veux dire quoi par le code HTML généré ? excuse mon ignorance :oops: le code source que je peux chercher sur Affichage->afficher code source sur mon browser ?
16/11/2009, 07h48
vermine

Citation:

Envoyé par Chakalaka

PS: tu veux dire quoi par le code HTML généré ? excuse mon ignorance :oops: le code source que je peux chercher sur Affichage->afficher code source sur mon browser ?

C'est bien cela. ;)
17/11/2009, 16h53
Chakalaka

Citation:

Envoyé par vermine

C'est bien cela. ;)

Ok j'ai pris note merci pour toutes vos réponses :ccool:

Après de longues heures de travail j'ai découvert que c'était une erreur dans mon formulaire HTML (des caractères \ en plus)