Script de validation "zappé" sous IE
Posté : 16 avr. 2007, 16:24
Salut à tous !
Pour valider un formulaire en JavaScript, j'ai pondu un script qui, s'il marche convenablement sous Firefox et Opera, est complètement "zappé" sous Internet Explorer : en effet, sous ce dernier, si je clique sur le bouton de validation alors que des champs ne sont pas remplis, tout se passe comme si le formulaire était rempli en bonne et due forme.
Voici le code HTML contenant le formulaire :
Et voici le JavaScript :
Pour valider un formulaire en JavaScript, j'ai pondu un script qui, s'il marche convenablement sous Firefox et Opera, est complètement "zappé" sous Internet Explorer : en effet, sous ce dernier, si je clique sur le bouton de validation alors que des champs ne sont pas remplis, tout se passe comme si le formulaire était rempli en bonne et due forme.
Voici le code HTML contenant le formulaire :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulaire</title>
<script type="text/javascript" src="validation.js"></script>
</head>
<body id="haut">
<form id="inscription" method="post" action="envoi.html" onsubmit="return validation ()">
<fieldset>
<p>
<span class="flottement">Civilité *</span>
<input id="mme" class="coche" name="civilite" type="radio" value="Mme" />
<label for="mme">Mme</label>
<input id="mlle" class="coche" name="civilite" type="radio" value="Mlle" />
<label for="mlle">Mlle</label>
<input id="m" class="coche" name="civilite" type="radio" value="M" />
<label for="m">M</label>
</p>
<p>
<label class="flottement" for="nom">Nom *</label>
<input id="nom" name="nom" type="text" />
</p>
<p>
<label class="flottement" for="prenom">Prénom *</label>
<input id="prenom" name="prenom" type="text" />
</p>
<p>
<label class="flottement" for="courriel">E-mail *</label>
<input id="courriel" name="courriel" type="text" />
</p>
<p>
<label class="flottement" for="mot_de_passe">Mot de passe</label>
<input id="mot_de_passe" name="mot_de_passe" type="password" />
</p>
<p>
<label class="flottement" for="mot_de_passe_confirmation">Confirmez votre mot de passe</label>
<input id="mot_de_passe_confirmation" name="mot_de_passe_confirmation" type="password" />
</p>
<p class="annulation-flottement"><input id="bon_plan" class="coche" name="bon_plan" type="checkbox" value="oui" /> <label for="bon_plan">Je souhaite recevoir les bons plans partenaires sélectionnés par primashop.com (Je pourrais changer d'avis à tout moment ultérieurement).</label></p>
<p><input id="cgu" class="coche" name="cgu" type="checkbox" value="oui" /> <label for="cgu">Je déclare avoir pris connaissance des conditions générales d'utilisation et en accepte les termes (inscription à la newsletter comprise). Conditions générales d'utilisation : <a href="#haut">cliquez ici.</a></label></p>
</fieldset>
<h3>Pour mieux vous connaître :</h3>
<fieldset id="mieux-connaitre">
<p><input id="enceinte" class="coche" name="enceinte" type="checkbox" value="oui" /> <label for="enceinte"><strong>Je suis enceinte</strong></label></p>
<p>
Je suis enceinte
<label class="masque" for="mois">Mois</label>
<select id="mois" name="mois">
<option>Mois</option>
</select>
<label class="masque" for="annee">Année</label>
<select id="annee" name="annee">
<option>Année</option>
</select>
<input id="masculin" class="coche" name="sexe" type="radio" value="M" />
<label for="masculin">M</label>
<input id="feminin" class="coche" name="sexe" type="radio" value="F" />
<label for="feminin">F</label>
</p>
<h4>Mes enfants</h4>
<p><label for="prenom_enfant">Prénoms</label> Date de naissance</p>
<p>
<input id="prenom_enfant" name="prenom_enfant" type="text" size="10" />
<label class="masque" for="jour_enfant">Jour</label>
<select id="jour_enfant" name="jour_enfant">
<option>Jour</option>
</select>
<label class="masque" for="mois_enfant">Mois</label>
<select id="mois_enfant" name="mois_enfant">
<option>Mois</option>
</select>
<label class="masque" for="annee_enfant">Année</label>
<select id="annee_enfant" name="annee_enfant">
<option>Année</option>
</select>
</p>
<p>
<input id="garcon" class="coche" name="sexe_enfant" type="radio" value="M" />
<label for="garcon">M</label>
<input id="fille" class="coche" name="sexe_enfant" type="radio" value="F" />
<label for="fille">F</label>
<label for="parente">Parenté</label>
<select id="parente" name="parente">
<option>Lien de parenté</option>
</select>
</p>
</fieldset>
<p id="validation"><input class="soumission" type="image" src="images/inscription-validation.gif" alt="Je m'inscris" /></p>
</form>
</body>
</html>
Code : Tout sélectionner
// Fonction de validation du formulaire
function validation ()
{
// Nom du formulaire
inscription = document.forms['inscription'];
// Champs du formulaire
civilite_mme = inscription.elements['mme'];
civilite_mlle = inscription.elements['mlle'];
civilite_m = inscription.elements['m'];
nom = inscription.elements['nom'];
prenom = inscription.elements['prenom'];
courriel = inscription.elements['courriel'];
mot_de_passe = inscription.elements['mot_de_passe'];
mot_de_passe_confirmation = inscription.elements['mot_de_passe_confirmation'];
enceinte = inscription.elements['enceinte'];
masculin = inscription.elements['masculin'];
feminin = inscription.elements['feminin'];
prenom_enfant = inscription.elements['prenom_enfant'];
garcon = inscription.elements['garcon'];
fille = inscription.elements['fille'];
// Expression régulière pour la validation de l'adresse électronique
format_courriel = /^[.-_0-9a-z]+@[-0-9a-z]+\.[a-z]{2,4}(\.[a-z]{2})?$/gi;
// Si certains champs sont vides ou non valables, affichage d'une alerte
if ((!civilite_mme.checked && !civilite_mlle.checked && !civilite_m.checked)
|| nom.value == ''
|| prenom.value == ''
|| !format_courriel.test (courriel.value)
|| mot_de_passe.value == ''
|| mot_de_passe_confirmation.value == ''
|| mot_de_passe_confirmation.value != mot_de_passe.value
|| (enceinte.checked && (!masculin.checked || !feminin.checked))
|| prenom_enfant.value == ''
|| (!garcon.checked && !fille.checked))
{
alert ('Certains champs du formulaire sont vides ou non valables.');
return false;
}
// Sinon, envoi du formulaire
else return true;
}
