Voilà un exemple de contrôle de différents champs (à tester dans un page séparée) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
<!--
function Trim (myString)
{//supprime les espaces vides en début et en fin de chaine
return myString.replace(/^\s+/g,'').replace(/\s+$/g,'')
}
function Verif_valide(id_input, regex)
{
var champ;
var etat = true;
if (champ = document.getElementById(id_input))
{
var id_span = champ.name+'_valide';//id du span = nom du champ concaténé à _valide
var span;
// Si le span associé existe on fait le contrôle
if(span = document.getElementById(id_span))
{
// Test le regex ou si le champ est vide
if ((regex.test(champ.value)) || Trim (champ.value) == '')
{
span.style.display = 'none';
}
else
{
span.style.display = 'inline';
etat = false;
}
}
}
return etat;
}
function Verif_egal(id_input1, id_input2)
{
var champ1;
var champ2;
var etat = true;
if (champ1 = document.getElementById(id_input1))
{
var id_span = champ1.name+'_egal';//id du span = nom du champ concaténé à _egal
var span;
if(champ2 = document.getElementById(id_input2))
{
// Si le span associé existe on fait le contrôle
if(span = document.getElementById(id_span))
{
// Test l'egalité des deux champ
if (champ1.value == champ2.value || Trim (champ1.value) == '' || Trim (champ2.value) == '')
{
span.style.display = 'none';
}
else
{
span.style.display = 'inline';
etat = false;
}
}
}
}
return etat;
}
function Verif_checked(bloc)
{
var bloc_controle;
var etat = true;
// Sélection du bloc contenant les champs à contrôler
if(bloc_controle = document.getElementById(bloc))
{
//Initialisation d'une variable pour contenir un tableau.
var tab = new Array();
var no_check = new Array();
// Cherche les balises "input" inlues dans le bloc
tab = bloc_controle.getElementsByTagName('input');
var nb_tableau = tab.length;
// Liste les éléments du tableau
for (i=0; i < nb_tableau; i++)
{
var id_span = tab[i].name+'_check';//id du span = nom du champ concaténé à _vide
// Si le span associé existe on fait le contrôle
if(span = document.getElementById(id_span))
{
if(tab[i].checked != true)
{
// Si l'élément n'est pas coché on ajoute un élément au tableau des éléments non cochés
no_check.push("1");
}
}
}
// Si les deux tableaux ont le même nombre d'éléments (aucun élément n'a été coché)
if(no_check.length == tab.length)
{
span.style.display = 'inline';
etat = false;
}
else
{
// normalement non indispensable (juste pour symétrie avec les autres fonctions)
span.style.display = 'none';
}
}
return etat;
}
function Verif_texte_vide(bloc,type_champ)
{
var bloc_controle;
var etat = true;
// Sélection du bloc contenant les champs à contrôler
if(bloc_controle = document.getElementById(bloc))
{
//Initialisation d'une variable pour contenir un tableau.
var tab = new Array();
// Cherche les balises "type_champ" inlues dans le bloc ("formulaire1" ou "form_text" dans l'exemple)
tab = bloc_controle.getElementsByTagName(type_champ);
var nb_tableau = tab.length;
var span;
// Liste les éléments du tableau
for (i=0; i < nb_tableau; i++)
{
var id_span = tab[i].name+'_vide';//id du span = nom du champ concaténé à _vide
// Si le span associé existe on fait le contrôle
if(span = document.getElementById(id_span))
{
if(Trim(tab[i].value) == "")
{
span.style.display = 'inline';
etat = false;
}
else
{
span.style.display = 'none';
}
}
}
}
return etat;
}
function Controle_form ()
{
var etat = true;
// ici tu défini les bloc à contrôler (champs qui ne doivent pas être vides) avec le type de champs associés en les passant en paramètres à la fonction Verif_texte_vide
if (!Verif_texte_vide('form_input','input')) etat = false;
// ces contrôles spécifiques doivent être placés après la fonction Verif_texte_vide puisqu'ils vérifient la qualité du champ. On passe à la fonction Verif_valide l'id du champ et le regex de contrôle
var regex_tel = /^0[1-9]([_.\-\s]*[0-9]{2}){4}$/;
if (!Verif_valide('numero',regex_tel)) etat = false;
var regex_mail = /^([a-zA-Z0-9_-])+([.]?[a-zA-Z0-9_-]{1,})*@([a-zA-Z0-9-_]{2,}[.])+[a-zA-Z]{2,3}$/;
if (!Verif_valide('mail',regex_mail)) etat = false;
// Necessite un id identique au nom du champ
if (!Verif_egal('confirmation','pass')) etat = false;
if (!Verif_checked('radio_check')) etat = false;
return etat;
}
-->
</script>
<style type="text/css">
<!--
#form_input span, #radio_check span {
display:none;
}
-->
</style>
</head>
<body>
<div class="form-container">
<form name="formulaire" method="POST" action="#" onsubmit="return Controle_form();">
<fieldset>
<div id = "radio_check">
<input name="MR" value="Mr" type="radio" />Mr
<input name="MR" value="Mme" type="radio" />Mme
<span id = "MR_check" class="important"> Un bouton doit être choisi</span>
</div>
<div id = "form_input">
<label for="nom"><font color="#FF0000"> *</font>Votre nom :</label><p>
<input id="nom" name="nom" size="50" maxlength="100" type="text" class="error" value="" />
<span id = "nom_vide" class="important"> Le champ NOM doit être rempli</span></p>
<p> </p>
<label for="prenom"><font color="#FF0000"> *</font>Votre prénom :</label>
<p>
<input id="prenom" name="prenom" size="50" maxlength="100" type="text" class="error" value="" />
<span id = "prenom_vide" class="important"> Le champ PRENOM doit être rempli</span></p>
<p> </p>
<label for="mail"><font color="#FF0000"> *</font>Votre adresse mail :</label>
<p>
<input name="mail" id="mail" size="50" maxlength="100" type="text" class="error" value="" />
<span id = "mail_vide" class="important"> Le champ MAIL doit être rempli</span><span id = "mail_valide" class="important"> Le champ MAIL est invalide</span></p>
<p> </p>
<label for="numero"><font color="#FF0000"> *</font>Votre numéro de
téléphone :</label>
<p>
<input name="numero" id="numero" size="15" maxlength="15" type="text" class="error" value=""/>
<span id = "numero_vide" class="important"> Le champ TELEPHONE doit être rempli</span><span id = "numero_valide" class="important"> Le champ TELEPHONE est invalide</span></p>
<p> </p>
<label for="pass"><font color="#FF0000"> *</font>Password :</label>
<p>
<input type="password" name="pass" id="pass" value="" class="error" />
<span id = "pass_vide" class="important"> Le champ PASSWORD doit être rempli</span></p>
<p> </p>
<label for="confirmation"><font color="#FF0000"> *</font>Confirmation password :</label>
<p>
<input type="password" name="confirmation" id="confirmation" value="" class="error" />
<span id = "confirmation_vide" class="important"> Le champ CONFIRMATION doit être rempli</span><span id = "confirmation_egal" class="important"> Le champ CONFIRMATION n'est pas identique au champ PASSWORD</span></p>
</div>
</fieldset>
<input type="submit" value="Enregistrement"/>
</form>
</div>
</body>
</html>
