Discussion :

[Chakalaka]

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 :

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

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 :

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
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 :

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

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

[vermine]

Bonjour,

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

Code :

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

1
2
 
var elt = document.getElementById("monId");

[gwyohm]

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

[Chakalaka]

Je vous remercie infiniment pour vos réponses

Je viens de remplacer mon code JS par le code suivant

Code HTML

Code :

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

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 :

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

[sekaijin]

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 :

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

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 :

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

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 :

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

<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 :

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

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

[Chakalaka]

Merci bien pour toutes vos réponses

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 :

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

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 :

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
 
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 :

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

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