Contrôle de champs obligatoires d'un formulaire

**lolymeupy** · 19/02/2008, 18h21

Bonjour,
j'ai un problème sur une fonction javascript qui est censé me permettre de controler si les champs obligatoires de mon formulaire sont vides ou non

Voici des extraits du code de mon formulaire :
- je declare le .js où se trouve la fonction que j'utilise :

Code :

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

1
2
3
4
5
 
<head>
...
<script src="scripts/controle_champ.js"></script>
</head>

- extrait(1) du formulaire que j'utilise pour le test (un label et un input 'text' correspondant): :

Code :

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

1
2
3
4
5
 
...
<td><label for="titre_evt">Titre évènement: *<br/><FONT SIZE="1"><I>( max. 100 caractères )</I></FONT></label></td>
<td><input type="text" maxlength="100" size="51" name="titre_evt" value="" id="titre_evt"><br /></td>
...

- extrait(2) du formulaire (c'est le bouton censé déclencher la fonction) :

Code :

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

1
2
3
4
 
...
<input type="button" value="Valider" id="valider" onclick="valider_formulaire(this.form)" class="button"/>
...

- et le code mon fichier controle_champ.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
valider_formulaire(thisForm)
 
{
 
    if(thisForm.titre_evt.value == '')
    {
         thisForm.titre_evt.value ='ok';
         //thisForm.usager.focus();
         return false;
    }
}

En gros, je test ici de mettre value 'ok' dans mon input 'text' titre_evt, si la value de celui-ci est vide...
Mais 'ok' ne s'affiche pas dedans, et je sais pas d'où viens le bug...

Merci d'avance...

**Gats** · 19/02/2008, 18h39

Code :

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

onsubmit="valider_formulaire(this);"

**lolymeupy** · 19/02/2008, 19h37

J'ai testé ce que t'as mis Gats, mais pas ça marche toujours...

J'ai mis ça dans mon code:

Code :

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

1
2
 
...onclick="valider_formulaire(this)"...

(j'ai gardé onclick plutot que onsubmit parce que j'ai un <input type"button...
et pas un <input type"submit"...)
(j'ai essayé avec les 2 qd mêmes, au cas où,... mais sans résultat...)

**Gats** · 19/02/2008, 20h02

une omission ?

Code javascript :

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

1
2
3
valider_formulaire(thisForm){
 
}

au lieu de :

Code javascript :

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

1
2
3
function valider_formulaire(thisForm){
 
}

**|PaRa-BoL** · 19/02/2008, 20h02

Le onsubmit est à mettre dans le <form

**lolymeupy** · 19/02/2008, 20h22

Oups, t'as raison Gats, j'ai oublié le function...

Et effectivement, je viens de tomber sur un tuto où j'ai vu que le onsubmit est dans le form...j'avais pas compris...
Donc, un grand merci à vous deux....

's
Par contre, une fois ces 2 erreurs réparées, ça marche mais il m'envoie quand même vers enreg_evt.php ...

voilà mon code maintenant :

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
 
...
<script src="scripts/controle_champ.js"></script>
</head>
 
<body>
<form enctype="multipart/form-data" action="enreg_evt.php" method="post" onsubmit="valider_formulaire(this)">
...
 
 
...
<td><label for="titre">Titre évènement: *<br/><FONT SIZE="1"><I>( max. 100 caractères )</I></FONT></label></td>
<td><input type="text" maxlength="100" size="51" name="titre_evt" value="" id="titre_evt"><br /></td>
...
 
...
<input type="submit" value="Valider" id="valider" class="submit"/>
....

//et le fichier controle_champ.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function valider_formulaire(thisForm)
{
    if(thisForm.titre_evt.value == '')
    {
         thisForm.titre_evt.value ='ok';
         //thisForm.usager.focus();
         return false;
    }
}

et donc, une fois "sur" enreg_evt.php, si je recule d'une page, je retombe bien sur mon formulaire et il y a bien 'ok' dans mon input type='text'...
Ce que je voudrais savoir, c'est comment l'empecher d'aller sur le script .php puisque la condition de la fonction .js est vérifiée et donc qu'il retourne 'false'...
Une idée ...?

**|PaRa-BoL** · 19/02/2008, 20h59

Tu as oublié le return.

Code :

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

1
2
 
onsubmit="return valider_formulaire(this)">

Et ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
function valider_formulaire(thisForm)
{
    if(thisForm.titre_evt.value == '')
    {
         thisForm.titre_evt.value ='ok';
         //thisForm.usager.focus();
         return false;
    }
    return true;
}

Contrôle de champs obligatoires d'un formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager