javascript et formulaire

**barbato** · 29/09/2012, 19h37

bonjour,

pourriez vous m'indiquer un code en javascript à insérer permettant de vérifier que tous les champs du formulaire sont remplis lors de l'envoi avec message d'erreur " veuillez remplir tous les champs du formulaire"

je vous donne le code actuel 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
25
<form action="mailto:" method="post" enctype="text/plain" name="contact" align="center"class="Style47" id="contact">
          <p align="left">
             <label for="nom">Nom *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="nom" id="nom" required title="Le nom est requis!" x-moz-errormessage="Le prénom est requis!" /></p>
          <p align="left">
             <label for="prénom">Prénom *&nbsp;:&nbsp;</label>
             <input type="text" size="20" maxlength="20" name="prénom" id="prénom" required title="Le prénom est requis!" x-moz-errormessage="Le prénom est requis!" /></p>
          <p align="left">
       <label for="e-mail">E-mail *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="40" name="e-mail" id="e-mail" input required title="L'e-mail est requis!" x-moz-errormessage="L'e-mail est requis!" /></p>
          <p align="left"><label for="e-mail">Tel *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="tel" id="tel" input required title="Le tel est requis!" x-moz-errormessage="Le tel est requis!" /></p>
          <p align="left">
            <label for="sujet">Sujet *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input name="sujet" type="text" class="center" id="sujet" size="40" />
          </p>
          <p align="left">
         <label for="message">Message *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
         <br /><br />         
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <textarea name="message" cols="40" rows="6" id="message" value="Message"></textarea>
          </p>
 
          <p align="center">&nbsp;</p>
          <p align="center">
            <input type="submit" value="Envoyer" />
             </p>
        </form>

en vous remerciant

**SpaceFrog** · 29/09/2012, 20h53

Une simple petite recherche sur le forum t'aurait mené par là
http://www.developpez.net/forums/d55...on-formulaire/

**barbato** · 30/09/2012, 17h56

je te remercie mais c'est pas simple

j'ai un code en javascript mais ça marche pas, peut être ai je oublié quel que chose dans la balise 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<form action="mailto:" method="post" enctype="text/plain" name="contact" align="center"class="Style47" id="contact">
					     <p align="left">
				         <label for="nom">Nom *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</label>
				         <input type="text" size="20" maxlength="20" name="nom" id="nom" required title="Veuillez remplir tous les champs du formulaire" x-moz-errormessage="Veuillez remplir tous les champs du formulaire" /></p>
				         <p align="left">
				         <label for="prénom">Prénom *&nbsp;:&nbsp;</label>
				         <input type="text" size="20" maxlength="20" name="prénom" id="prénom" required title="Veuillez remplir tous les champs du formulaire" x-moz-errormessage="Veuillez remplir tous les champs du formulaire" /></p>
					     <p align="left">
						 <label for="e-mail">E-mail *&nbsp;: &nbsp;&nbsp;&nbsp;</label>
						 <input type="text" size="20" maxlength="40" name="e-mail" id="e-mail" input required title="Veuillez remplir tous les champs du formulaire" x-moz-errormessage="Veuillez remplir tous les champs du formulaire" /></p>
					     <p align="left"><label for="e-mail">Tel *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="tel" id="tel" input required title="Veuillez remplir tous les champs du formulaire" x-moz-errormessage="Veuillez remplir tous les champs du formulaire" /></p>
					     <p align="left">
					       <label for="sujet">Sujet *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
					       <input name="sujet" type="text" class="center" id="sujet" size="40" input required title="Veuillez remplir tous les champs du formulaire" x-moz-errormessage="Veuillez remplir tous les champs du formulaire"/>
					     </p>
					     <p align="left">
						   <label for="message">Message *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						   <br /><br />			       
					       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					       <textarea name="message" cols="40" rows="6" id="message" value="Message" input required title="Veuillez remplir tous les champs du formulaire" x-moz-errormessage="Veuillez remplir tous les champs du formulaire"></textarea>
					     </p>
 
					     <p align="center">&nbsp;</p>
					     <p align="center">
					       <input type="submit" value="Envoyer" />
				         </p>
					   </form>
 
 
 
<script type=text/javascript>
var check=document.getElementById("contact")
 
check.onsubmit=function()
{
var nom=document.getElementById("nom"),
prénom=document.getElementById("prénom"),
e-mail=document.getElementById("e-mail"),
sujet=document.getElementById("sujet"),
message=document.getElementById("message");
 
    if(nom.value && prénom.value && e-mail.value && sujet.value && message.value==true)
 
{
}
 
   else
{
alert("veuillez remplir tous les champs du formulaire");
}
 
}
</script>

**SpaceFrog** · 30/09/2012, 17h59

peut être ai je oublié quel que chose dans la balise form

le onsubmit ?

**barbato** · 30/09/2012, 22h50

oui je pense que c'est ça mais je sais pas quoi mettre.

je précise que je n'ai aucune page php (je connais pas le php) c'est une action de type mailto. mais je ne sais pas quoi mettre (peut être onSubmit="return check.onsubmit()")

en fait je ne sais pas si la page php est obligatoire dans ce cas.

donc j'ai essayé de faire autrement

j'ai essayé avec ce code pour le formulaire et le javascript et ça marche seulement pour les deux premiers champs, lorsqu'ils ne sont pas remplis par l'utilisateur il y a un message d'erreur donc ça fonctionne.

mais ensuite pour les autres champs s'ils ne sont pas remplis ça ne fonctionne pas il n'y a plus de message d'erreur je ne comprends pas pourquoi pourriez vous m'aider

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
<form action="mailto:" onSubmit="return check()" method="post" enctype="text/plain" name="contact" align="center"class="Style47" id="contact">
          <p align="left">
          <label for="nom">Nom *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="nom" id="nom" /></p>
          <p align="left">
             <label for="prénom">Prénom *&nbsp;:&nbsp;</label>
             <input type="text" size="20" maxlength="20" name="prénom" id="prénom" /></p>
          <p align="left">
       <label for="e-mail">E-mail *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="40" name="e-mail" id="e-mail" /></p>
          <p align="left"><label for="e-mail">Tel *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="tel" id="tel" ></p>
          <p align="left">
            <label for="sujet">Sujet *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input name="sujet" type="text" class="center" id="sujet" size="40" />
          </p>
          <p align="left">
         <label for="message">Message *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
         <br /><br />         
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <textarea name="message" cols="40" rows="6" id="message" value="Message" ></textarea>
          </p>
 
          <p align="center">&nbsp;</p>
          <p align="center">
            <input type="submit" value="Envoyer" />
             </p>
        </form>
        <script type=text/javascript>
function check() {
  if (document.contact.nom.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.prénom.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.e-mail.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.tel.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.sujet.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.message.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  return true;
  }
</script>

en vous remerciant

**SpaceFrog** · 01/10/2012, 09h29

Oui c'est bien cela qu'il faut mettre dans le onsubmit

Tout se passe coté client, pas besoin de langage serveur.

le onsubmit se declenche avant l'envoi du formulaire
ta fonction de vérification doit retourner true ou false

ainsi lors de l'envoi du formulaire, avec onsubmit="return verif()" javascript lance la fonction de verification avant l'envoie du form
Si elle relève une anomalie de saisie elle retourne false
tu obtiens donc onsubmit="return false" ce qui bloque l'envoi du form

Si tous les champs sont remplis correctement, tu obtiens onsubmit="return true" ce qui ne bloque pas l'envoi.

javascript et formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager