JS - Verification des champs

Version imprimable

Bonjour,

Je fais un script d'inscription en php et j'aimerais ajouté du js pour vérifier le formulaire (pour que tout soit remplis). J'ai fait un code mais quand je clique sur le bouton pour valider, ça ne fais rien ...

Mon js :

Code:

1
2
3
4
5
6
7
8
function verifForm(formulaire)
{
  if (formulaire.pass.value == "")||(formulaire.pass2.value != formulaire.pass.value)||(formulaire.nom.value == "")||(formulaire.prenom.value == "")||(formulaire.adresse.value == "")||(formulaire.cp.value == "")||(formulaire.ville.value == "")||(formulaire.pays.value == "")||(formulaire.email.value == "")
alert('Une erreur est survenue, vous devez ne pas avoir bien remplis le formulaire !');
 
  else
  formulaire.submit();
}

Mon html :

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
69
70
71
72
73
74
75
76
77
<form id="form1" name="form1" method="post" action="inscription.php?traitement=1">
      <h3>Mot de passe</h3>
      <p>Votre id vous sera donn&eacute; dans le mail que vous recevrez &agrave; la fin de l'inscription</p>
      <p>Votre mot de pass : 
        <input name="pass" type="text" id="pass" />
        * 
        Veillez le retapper : 
        <input name="pass2" type="text" id="pass2" />
        *
</p>
      <h3>Vos coordonnées</h3>
      <p>Votre Nom : 
        <input name="nom" type="text" id="nom" maxlength="20" />
        *
      </p>
      <p>Votre Pr&eacute;nom : 
        <input name="prenom" type="text" id="prenom" maxlength="20" />
        *      </p>
      <p>Votre statut : 
        <select name="select">
          <option value="Particulier">Particulier</option>
          <option value="Professionel">Professionel</option>
        </select>
      </p>
      <p>Adresse : 
        <input name="adresse" type="text" id="adresse" size="50" maxlength="200" />
        *
      </p>
      <p>Code Postal : 
        <input name="cp" type="text" id="cp" size="10" maxlength="5" />
        *
      Ville : 
        <input name="ville" type="text" id="ville" maxlength="30" />
        *
      Pays : 
      <input name="pays" type="text" id="pays" maxlength="30" />
      * </p>
      <p>Votre email (non-publique) : 
        <input name="email" type="text" id="email" maxlength="100" />
        *      </p>
      <h3>Informations Web</h3>
      <p>Votre siteweb : 
        <input name="siteweb" type="text" id="siteweb" maxlength="30" />
      Url : 
      <input name="url_siteweb" type="text" id="url_siteweb" maxlength="255" />
      </p>
      <p>Votre email (publique) : 
        <input name="email_pu" type="text" id="email_pu" maxlength="100" />
      </p>
      <p>Votre MSN : 
        <input name="msn" type="text" id="msn" maxlength="50" />
      Compte Skype : 
      <input name="skype" type="text" id="skype" maxlength="20" />
      </p>
      <p>Id paypal (email) : 
        <input name="paypal" type="text" id="paypal" maxlength="100" />
      </p>
      <p>Avatar : 
        <input name="avatar" type="text" id="avatar" maxlength="255" />
      </p>
      <p>Citation :  
        <input name="citation" type="text" id="citation" maxlength="300" />
      </p>
 
      <h3>Informations</h3>
      <p>
        <textarea name="textarea" cols="70" rows="6" disabled="disabled">Voici quelques ligne dont vous devez avoir connaissance :
 
1/ Vos informations ne seront pas distribuées à qui que se soit !
2/ Votre mot de passe sera crypté, personne ne pourra donc voir votre mot de passe (nous y compris) !</textarea>
      </p>
      <p>En validant votre inscription vous  que vos informations soit stock&eacute;es dans notre base de donn&eacute;es.<br />
      Nous vous conseillons de bien v&eacute;rifi&eacute; vos informations sinon vous devrez tout recommencer en cas de probl&egrave;me ! </p>
      <p>
        <input type="button" name="Submit" value="Creer mon profil" onClick="verifForm(this.form)" />
</p>
    </form>

Salut

lis un peu de doc, ou cherche sur :google: ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function Verif()
{
   if(/*formulaire OK*/) return true;
   else
   {
        alert('erreur');
        return false;
   }
}
</script>
[...]
<form [...] onsubmit="return Verif();" [...]>
[...]
<input type="submit" .... >

faut tu commence par aller chercher t'es objet

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
var pass = document.getElementById( 'Le_ID_de_ton_champ' );
var pass2 = document.getElementById( 'Le_ID_de_ton_champ2' );
 
if( pass.value == '' || pass2.value == '' ){
       alert( 'sorry big faut tu remplissent tous' );
       return false;
} else {
     var form= document.getElementById( 'taForm' );
     if( document.all && form.onsubmit )    //Pour IE
         form.onsubmit();
     form.submit();                                  //Mozila
}

Ca m'ennerve parce que tout me parait logique et rien ne marche :(

J'ai chipoté beaucoup et ùmaintenant j'ai ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var pass = document.getElementById( 'pass' );
var pass2 = document.getElementById( 'pass2' );
var nom = document.getElementById( 'nom' );
var prenom = document.getElementById( 'prenom' );
var adresse = document.getElementById( 'adresse' );
var cp = document.getElementById( 'cp' );
var ville = document.getElementById( 'ville' );
var pays = document.getElementById( 'pays' );
var email = document.getElementById( 'email' );
var metier = document.getElementById( 'metier' );
 
function valider(){
  if(pass.value == pass2.value)&&(pass.value != '')&&(nom.value != '')&&(prenom.value != '')&&(adresse.value != '')&&(cp.value != '')&&(ville.value != '')&&(pays.value != '')&&(email.value != '')&&(metier.value != '') {   
    return true;
  }
  else {
    alert("Une erreur est survenue, veillez remplir correctement les champs obligatoires !");
    return false;
  }
}

Code:

<form onsubmit="return valider()" id="form1" name="form1" method="post" action="inscription.php?traitement=1">

Mais évidemment ça ne fonctionne pas ...

Peut-on m'aider ?

21/05/2006, 16h23
Swoög

ça ne fonctionne pas, càd ? ton input est bien un submit, pas un button ?
21/05/2006, 16h26
stouqx

Oui :

<input type="submit" name="Submit" value="Creer mon profil" />

Enfaite ca n'a pas l'air de vérifier puisque ça va direct sur l'autre page ..
21/05/2006, 17h01
Swoög

fais un alert au début de ta fonction (avant le if ;))
21/05/2006, 17h12
stouqx

Mais alors, ca va faire une alert avant de savoir si tout les champs son remplis ou pas et si tout les champs son remplis il y aura un alert ...
21/05/2006, 17h17
Swoög

oui, mais ça te permettra de vérifier que la fonction s'exécute bien, si l'alert s'affiche, alors tu pourras le retirer et être confiant, ta fonction s'exécute, sinon... faudra chercher l'erreur ;)

Bonne idée ...

L'alert ne s'affiche pas donc c'est pas une erreur de js ...

Voilà mon code qui inclut le fichier js :

Code:

<script language="javascript" src="inc/verif_inscription.js"></script>

Voilà mon code actuelle :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var pass = document.getElementById( 'pass' ); var pass2 = document.getElementById( 'pass2' ); var nom = document.getElementById( 'nom' ); var prenom = document.getElementById( 'prenom' ); var adresse = document.getElementById( 'adresse' ); var cp = document.getElementById( 'cp' ); var ville = document.getElementById( 'ville' ); var pays = document.getElementById( 'pays' ); var email = document.getElementById( 'email' ); var metier = document.getElementById( 'metier' ); alert("Une erreur est survenue, veillez remplir correctement les champs obligatoires !"); function valider(){ if(pass.value == pass2.value)&&(pass.value != '')&&(nom.value != '')&&(prenom.value != '')&&(adresse.value != '')&&(cp.value != '')&&(ville.value != '')&&(pays.value != '')&&(email.value != '')&&(metier.value != '') { form1.submit(); return (true); } else { alert("Une erreur est survenue, veillez remplir correctement les champs obligatoires !"); return false; } }
J'ai essayé en mettant le code direct sur la page mais rien non plus ...
J'utilise easy-php ça change p-e quelque chose ?

Mon form :

Code:

<form onsubmit="return valider()" id="form1" name="form1" method="post" action="inscription.php?traitement=1">

Mon bouton pour valider :

Code:

<input type="submit" name="Submit" value="Creer mon profil" />

j'espère que tu pourras trouver l'erreur ..

le navigateur ne trouve pas le chemin vers le fichiers JS...

essaie ce code là pour ton .js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var pass = document.getElementById( 'pass' );
var pass2 = document.getElementById( 'pass2' );
var nom = document.getElementById( 'nom' );
var prenom = document.getElementById( 'prenom' );
var adresse = document.getElementById( 'adresse' );
var cp = document.getElementById( 'cp' );
var ville = document.getElementById( 'ville' );
var pays = document.getElementById( 'pays' );
var email = document.getElementById( 'email' );
var metier = document.getElementById( 'metier' );
alert("Fichier .js charge");
 
function valider(){
  alert("Verification du formulaire en cours...");
  if(pass.value == pass2.value)&&(pass.value != '')&&(nom.value != '')&&(prenom.value != '')&&(adresse.value != '')&&(cp.value != '')&&(ville.value != '')&&(pays.value != '')&&(email.value != '')&&(metier.value != '') {   
    form1.submit();
    return (true);
  }
  else {
    alert("Une erreur est survenue, veillez remplir correctement les champs obligatoires !");
    return false;
  }
}

si rien ne s'affiche, il faut que tu modifies le chemin d'accès vers ton .js (là ça dépend de ton organisation ;)