controle des erreurs dans un formulaire

WRInaute discret
Bonjour
je souhaite que des messages d'erreur soient affichés
dans un <div> si les champs nom, email et telephone
sont mal completés (vide ou chiffre au lieu de lettre)
tout en restant sur cette page, bloquer la validation du <form>
Et j'ai comme ça 12 champs à controller
Peut etre existe t il un moyen plus simple :


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function controle() {
if(document.getElementById('name').style.display == 'none' || document.getElementById('name').style.display == '') {
document.getElementById('err_name').style.display = 'block'; 
}else{
document.getElementById('err_name').style.display = 'none'; 
}

if(document.getElementById('email').style.display == 'none' || document.getElementById('email').style.display == '') {
document.getElementById('err_email').style.display = 'block'; 
}else{
document.getElementById('err_email').style.display = 'none'; 
}

if(document.getElementById('phone').style.display == 'none' || document.getElementById('phone').style.display == '') {
document.getElementById('err_phone').style.display = 'block'; 
}else{
document.getElementById('err_phone').style.display = 'none'; 
}

}
</script>
</head>
<body>
<form method="post" action="achat.php" name="form" id="form" onSubmit="return controle()">

<div class="label1" id="lname">Nom:</div>
<div class="label2">
<input type="text" id="name" name="name" size="35" maxlength="50" value="" />

<div id="err_name" style="display: none;">
<span class="warning" id="err_msg_name"></span>
</div>
</div>

<br />

<br />

<div class="label1">
<label for="email">Email:</label>
</div>
<div class="label2">
<input type="text" id="email" name="email" size="35" maxlength="60" value="" onblur="checkEmail();" />
<br />
<div id="err_email" style="display: none;">
<span class="warning" id="err_msg_email">erreur</span>
</div>

</div>
<br />

<div class="label1">
<label>Téléphone:</label>
</div>
<div class="label2">
<input type="text" id="phone" name="phone" size="17" maxlength="50" value="" />
<div id="err_phone" style="display: none;">
<span class="warning" id="err_msg_phone">erreur</span>
</div>
</div>

<div><input type="submit" onclick="javascript:controle();" value="Valider"></div>

</form>
</body>
</html>


merci
 
WRInaute accro
Une validation côté client, ce n'est pas franchement le mieux niveau sécu, rien de tel qu'une validation côté serveur (en php donc).
 
WRInaute accro
j'aurais juste rajouté un message pour indiquer les champs non remplis.
Par contre, au niveau php, vérifie bien la cohérence des données par rapport aux infos souhaitées et fait le ménage de toute tentative d'insertion de données malveillantes
 
Discussions similaires
Haut