Script kit "javascript" de verification d'un formulaire
Soyez le premier à donner votre avis sur cette source.
Snippet vu 41 688 fois - Téléchargée 26 fois
Contenu du snippet
J'ai reflechis sur un code Javascript qui permet de verifier automatiquement si tous les champs d'un formulaire sont renseigné (sans ternir compte du type de donnée qui y est inscrit) . Ainsi, quelque soit votre formulaire ce code fonctionnera. Seuleument verifier la position de votre formulaire dans le DOM de la page web. dans ce script il n'y a qu'un seul formulaire donc le tableau forms a pour indice 0 =>forms[0]. Treve de bavardage. le script
Source / Exemple :
script : autre.js
function check_input(){
var message_alert = "";
for(var i = 0; i < window.document.forms[0].length ; i++) {
var rechRapide = window.document.forms[0].elements[i].value;
var nom_champ = window.document.forms[0].elements[i].name;
window.document.forms[0].elements[i].style.backgroundColor = "#FFFFFF";
if(rechRapide == "") {
window.document.forms[0].elements[i].focus();
window.document.forms[0].elements[i].style.backgroundColor = "#CCCCCC";
message_alert +=" Veuillez remplir le champ " + nom_champ +"\n";
}
}
if (message_alert == "") {
return true;
} else {
message_alert = "Informations omises dans le formulaire : \n" + message_alert;
alert(message_alert);
return false;
}
}
fichier html : index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Essai verif champ </title>
<script type="text/javascript" src="autre.js"> </script>
</head>
<body>
<form name="form1" method="GET" action="lire.php" onSubmit = "var resultat = check_input(); return resultat;" >
<table width="500" border="0" cellspacing="0" cellpadding="2" class="Texte_form">
<tr>
<td width="84">Numéro client </td>
<td><input type="text" name="Numéro_client" value="" size="6">
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td>NOVA </td>
<td width="82"><input type="text" name="NOVA" value="" size="6">
</td>
<td width="102">Numero classement </td>
<td width="116"><input type="text" name="Numero_classement" value="" size="6"></td>
</tr>
<tr>
<td colspan="4"><table width="390" border="0" cellspacing="0" cellpadding="2" class="Texte_form">
<tr>
<td width="83">Nom du client</td>
<td colspan="3"><input type="text" name="Nom_du_client" value="" size="35"></td>
</tr>
<tr>
<td>Dénomination</td>
<td colspan="3"><input type="text" name="Dénomination" value="" size="35"></td>
</tr>
<tr>
<td>Adresse client</td>
<td colspan="3"><input type="text" name="Adresse_client" value="" size="35"></td>
</tr>
<tr>
<td>Adresse suite</td>
<td colspan="3"><input type="text" name="Adresse_suite" value="" size="35"></td>
</tr>
<tr>
<td>Code postal </td>
<td width="86"><input type="text" name="Code_postal" value="" size="6"></td>
<td width="28">Ville</td>
<td width="177"><input type="text" name="Ville" value="" size="18"></td>
</tr>
</table>
<input type="image" src="img/save.gif" width="31" height="29" name="Submit">
</form>
</body>
</html>
A voir également
- Script kit "javascript" de verification d'un formulaire
- Vérification d'un formulaire - Codes sources - Javascript (Formulaire)
- Vérification d'un formulaire en temps réel - Codes sources - Javascript (Trucs & Astuces)
- Javascript : Ajax : completer automatiquement un formulaire (<input type=text>) php et base my - Guide
- Javascript : Vform (contrôle complet de formulaire) - CodeS SourceS - Guide
- Javascript : Class verification des saisies - CodeS SourceS - Guide
Par rapport au test pour une page qui a plusieurs formulaire, on defini juste une valeur en parametre. voici le code:
function check_input(j){
var message_alert = "";
for(var i = 0; i < window.document.forms[j].length ; i++) {
var rechRapide = window.document.forms[j].elements[i].value;
var nom_champ = window.document.forms[j].elements[i].name;
window.document.forms[j].elements[i].style.backgroundColor = " FFFFFF";
if(rechRapide == "") {
window.document.forms[j].elements[i].focus();
window.document.forms[j].elements[i].style.backgroundColor = "dcFbaa ";
message_alert +=" Veuillez remplir le champ " + nom_champ +"\n";
}
}
if (message_alert == "") {
return true;
} else {
message_alert = "Informations omises dans le formulaire !!!: \n"+ message_alert;
alert(message_alert);
return false;
}
}
j prend le numero du formulaire dans la page
exple:Pour une page avec deux form, le premier a la valeur 0 et le second 1
PS:n'oubliez pas de specifier le numero du formulaire en parametre à l'appel de la fonction
function check_input(){
var message_alert = "";
for(var i = 0; i < window.document.forms[0].length ; i++) {
var rechRapide = window.document.forms[0].elements[i].value;
var nom_champ = window.document.forms[0].elements[i].name;
///////////////////////////////////////////////// Background des éléments déjà formatés
window.document.forms[0].elements[i].style.backgroundColor = "#FFFFFF";
//////////////////////////////////////////////////
if(rechRapide == "") {
window.document.forms[0].elements[i].focus();
window.document.forms[0].elements[i].style.backgroundColor = "#CCCCCC";
message_alert +=" Veuillez remplir le champ " + nom_champ +"\n";
}
}
if (message_alert == "") {
return true;
} else {
message_alert = "Informations omises dans le formulaire : \n" + message_alert;
alert(message_alert);
return false;
}
}
- Messages postés
-
81
- Date d'inscription
- mercredi 7 juillet 2004
- Statut
- Membre
- Dernière intervention
- 1 octobre 2007
1Bonne continuation
bravo pour la simplicité,
Kenavo
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.