probleme validation de formulaire javascript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : probleme validation de formulaire javascript

oli1987

Bonjour,

J'ai un petit souci lors de la validation de mon formulaire en javascript.
Si des champs sont vides, une message d'alerte le signale lorsque l'on clique sur le bouton Valider. Mais au lieu de laisser l'internaute compléter les champs vides, on le dirige vers la page suivante qui annonce à l'internaute que son formulaire a bien été envoyé.

Merci à celui ou ceux qui pourront m'aider ...

Voici ma fonction javascript suivie de mon code html.

Code :

function ValidForm()
{
var nom = document.getElementById("Prenom_Nom" ).value;
var email = document.getElementById("Email" ).value;
var dde = document.getElementById("Texte" ).value;
var err = 0;
if(nom == "" || nom.length < 2)
{
lblNom.style.color="red";
err++;
}
else
{
lblNom.style.color="black";
}
if(email == "" )
{
lblEmail.style.color="red";
err++;
}
else
{
lblEmail.style.color="black";
}
if(dde == "" )
{
lblTexte.style.color="red";
err++;
}
else
{
lblTexte.style.color="black";
}
if(err != 0)
{
alert("Nombre de champ(s) éronné(s) : " + err + "." );
}
}

Code html :

Code :

<form method="post" id="form" name="form" onsubmit="return ValidForm()" action="index.php?rub=21">
<fieldset>
<legend>Formulaire de contact</legend>
<table class="form">
<tr>
<td><label name="lblNom" id="lblNom">Nom - Prénom</label></td>
</tr>
<tr>
<td><input class="txt" type="text" name="Prenom_Nom" id="Prenom_Nom" size="34" /></td>
</tr>
<tr>
<td><label name="lblEmail" id="lblEmail">Votre email</label></td>
</tr>
<tr>
<td><input class="txt" type="text" name="Email" id="Email" size="34" /></td>
</tr>
<tr>
<td>Sujet</td>
</tr>
<tr>
<td>
<select name="Sujet">
<option value="Renseignements">Renseignements</option>
<option value="Suggestions">Suggestions</option>
<option value="Proposer un site">Proposer un site</option>
<option value="Réactions">Réactions</option>
<option value="Envoi d'un résultat">Envoi d'un résultat</option>
<option value="Bug">Problème sur le site</option>
<option value="Autre">Autre</option>
</select>
</td>
</tr>
<tr>
<td><label name="lblTexte" id="lblTexte">Votre demande</label></td>
</tr>
<tr>
<td><textarea class="comment" name="Texte" rows="7" id="Texte" cols="70"></textarea></td>
</tr>
<tr>
<td class="center"><input type="submit" value="Envoyer au webmaster" class="submit" /></td>
</tr>
</table>
</fieldset>
</form>

Message édité par oli1987 le 09-06-2009 à 19:09:17

Publicité

guybrush02

Tu as oublié un return false; dans ton code, en cas d'erreur.

oli1987

De fait, grand merci

oli1987

Par contre, la verification fonctionne bien sous Internet Explorer mais pas sous Firefox ... Grrrr !

guybrush02

Remplace les lblNom.style.qqchose par des document.getElementById comme tu le fais pour récupérer les valeurs du formulaire.

---------------
Guybrush

oli1987

Haaa nickel, ça fonctionne sur les deux ... MAIS, et oui, il y a un mais ...

Avant, une fois qu'on cliquait sur le message d'alert, le "label" des champs vides se mettait en rouge. Maintenant, il reste en noir ... :s

Logique vu que le nom du "label" n'est renvoyé nulle part, mais comment faire ?

Code :

<script type="text/JavaScript">
function ValidForm()
{
var nom = document.getElementById("Prenom_Nom" ).value;
var email = document.getElementById("Email" ).value;
var dde = document.getElementById("Texte" ).value;
var err = 0;
if(nom == "" || nom.length < 2)
{
document.getElementById("Prenom_Nom" ).color="red";
err++;
}
else
{
document.getElementById("Prenom_Nom" ).color="black";
}
if(email == "" )
{
document.getElementById("Email" ).color="red";
err++;
}
else
{
document.getElementById("Email" ).color="black";
}
if(dde == "" )
{
document.getElementById("Texte" ).color="red";
err++;
}
else
{
document.getElementById("Texte" ).color="black";
}
if(err != 0)
{
alert("Nombre de champ(s) incomplet(s) : " + err + "." );
return false;
}
}
</script>

Message édité par oli1987 le 09-06-2009 à 20:41:17

guybrush02

Dans les nouveaux getElementById, tu sélectionnes les id de tes éléments du formulaire, pas les labels !
Remplace Prenom_Nom par lblNom, Email par lblEmail, etc.

Edité : et c'est getElementById(...).style.color, il manque le .style

Message édité par guybrush02 le 09-06-2009 à 20:53:05

---------------
Guybrush

oli1987

Tout maaarche ! Un grand merci à toi guybrush02 , merci, j'aurais appris quelque chose aujourd'hui !

phosphoreloaded

Et pour demain autre chose: http://openweb.eu.org/articles/for [...] ble/#texte
associer les étiquettes aux éléments de formulaire
<tr>
<td><label for="email">votre email :</label></td>
<td><input type="text" id="email" /></td>
</tr>

et

<table summary="">
</table>
pas faire chier les non-voyants quand on utilise encore des tableaux de présentation

FORUM HardWare.fr

Programmation

HTML/CSS

probleme validation de formulaire javascript

Sujets relatifs
Script javascript fonctionne / IE mais pas / Mozilla	[Débutant][OpenGL ES] Problème affichage textures
Problème fonction mail	Excel 2003, problème avec une boucle
probleme livre d'or	Problème sur ComboBox
Erreur avec setTimeout dans javascript externe	Problème d'envoi de formulaire malgré une erreur js
[PHP] Problème d'enregistrement en base
Plus de sujets relatifs à : probleme validation de formulaire javascript

Page générée en 0.075 secondes