Mon contrôleur de formulaire en javascript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mon contrôleur de formulaire en javascript

vita 100

Bonsoir,

J'ai créer un formulaire (ci-dessous) pour un site, avec contrôleur de champs automatique.

J'ai décidé de rajouter un checkbox, et du coup j'aimerai qu'il soit contrôlé par mon javascript.
j'ai essayé de d'insérer un ID supplémentaire, mais rien à faire, je ne comprends pas.
Mais pour mieux cerner le problème, je vous met le code :

Code :

<form action="" method="post" style="margin-bottom: 0" onsubmit="return verif();">
<input type="hidden" name="recipient" value=""/>
<input type="hidden" name="redirect" value=""/>
<input type="hidden" name="subject" value=""/>
<div class="espace">
<label for="samaritains">
Cours samaritains:
</label>
<input type="checkbox" value="30 nov + 1 déc" name="samaritains" />
30 nov + 1 déc
<input type="checkbox" value="7 déc + 8 déc" name="samaritains" />
7 déc + 8 déc
<input type="checkbox" value="14 déc + 15 déc<" name="samaritains" />
14 déc + 15 déc</div>
<div>
<label for="sensibilisation" >
Cours sensibilisation:
</label>
<input type="checkbox" value="03,04,05,06déc" name="sensibilisation" />
03,04,05,06déc
<input type="checkbox" value="10,11,12,13déc" name="sensibilisation" />
10,11,12,13déc
<input type="checkbox" value="17,18,19,20déc" name="sensibilisation" />
17,18,19,20déc</div>
<div class="espace">
<label for="confirmation" id="label_confirmation">
Confirmation par
</label>
<select name="confirmation" id="confirmation" >
<option value="CHOISIR">
CHOISIR
</option>
<option value="Téléphone">
Téléphone
</option>
<option value="E-mail">
E-mail
</option>
<option value="courrier">
Courrier
</option>
</select>
</div>
<div class="espace">
<label for="nom" id="label_nom">
Nom
<span>
*
</span>
</label>
<input type="text" name="nom" id="nom" />
</div>
<div class="espace">
<label for="prenom" id="label_prenom">
Prénom
<span>
*
</span>
</label>
<input type="text" name="prenom" id="prenom" />
</div>
<div class="espace">
<label for="adresse" id="label_adresse">
Adresse
<span>
*
</span>
</label>
<input type="text" name="adresse" id="adresse" />
</div>
<div class="espace">
<label for="postal" id="label_postal">
N° postal
<span>
*
</span>
</label>
<input type="text" name="postal" id="postal" />
</div>
<div class="espace" >
<label for="ville" id="label_ville">
Ville
<span>
*
</span>
</label>
<input type="text" name="ville" id="ville" />
</div>
<div class="espace">
<label for="telephone" id="label_telephone">
Téléphone
<span>
*
</span>
</label>
<input type="text" name="telephone" id="telephone" />
</div>
<div class="espace">
<label for="email" id="label_email">
Email
<span>
*
</span>
</label>
<input type="text" name="email" id="email" />
</div>
<div class="espace">
<label for="age" id="label_age">
Né(e) le
<span>
*
</span>
</label>
<input type="text" name="ne_le" id="age" />
</div>
<div class="espace">
<label for="message" id="label_message">
Message
</label>
<textarea name="message" id="message" cols="40" rows="3"></textarea>
</div>
<div class="espace">
<label for="cond" id="label_cond">
J'accepte le CG <span>
*
</span> </label>
<input type="checkbox" name="condition" id="cond" />
</div>
<div class="espace">
<input name="submit" type="submit" class="envoyer" value="Envoyer" />
</div>
</form>

et le JS

Code :

function verif() {
var err = 0;
var fields = new Array('confirmation', 'nom', 'prenom', 'adresse', 'postal', 'ville', 'telephone', 'age', 'email', 'cond');
for(var i=0; i<fields.length; i++){
if(document.getElementById(fields[i]).value == '') {
document.getElementById("label_"+fields[i]).className = 'error';
err++;
} else {
document.getElementById("label_"+fields[i]).className = '';
}
}
if( validerEmail('email') ) {
document.getElementById("label_email" ).className = '';
} else {
document.getElementById("label_email" ).className = 'error';
err++;
}
return ! err;
}
function validerEmail(idInput) {
if (!document.getElementById(idInput).value.match(/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/)) {
return false;
}
return true;
}

Serait-il plus profitable de mettre un menu déroulant (plus facile?)

Je vous remercie de votre aide.

Bonne soirée

Gardem

Publicité

mIRROR

Chevreuillobolchévik

désolé mais c est un peu bordelique
quelques trucs qui me sautent aux yeux
les labels n ont pas besoin d id
ton script est trop figé...l array au début meme s il semble etre une bonne idée retire toute sa souplesse à l automatisation
si tu pouvais juste indiquer quel champs tu veux rajouter a la verification...

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

nargy

Ok, le code présenté vérifie les champs obligatoires et change la classe CSS du label si le champs associé est vide, puis soumet ou non le formulaire, avec un traitement particulier pour l'adresse email.

Ça serait plus simple en effet de mettre un <select> vide par défaut plutot qu'une checkbox. Sinon tu as le choix entre:
- ajouter un traitement particulier pour la checkbox
- ajouter un bout de javascript sur la checkbox pour fixer son champs 'value' en fonction de son champs 'checked' à l'aide de onchange.
N'oublie pas de faire ces vérifications aussi du côté serveur, sans quoi les utilisateurs qui désactivent javascript passent au travers des protections.

nargy

Une solution plus générique:
- sur chaque label, tu ajoute l'id du champs à controler, et le nom de la fonction de controle, avec des attributs customisés (<label myctrlfct="verifemail" myctrlfield="email" ...> ),
- pour vérifier le formulaire, tu parcours le document à l'aide de getElementByTag('label'), tu obtiens alors pour chaque label le nom du champs à vérifier, et la fonction qui va avec.

FORUM HardWare.fr

Programmation

HTML/CSS

Mon contrôleur de formulaire en javascript

Sujets relatifs
Comment faire un formulaire de renseignements ???	créer une macro VBA qui modifiera une base de données automatiquement
debuuger javascript sous struts	Récup de valeurs d'un formulaire quand on sait pas le nb de valeurs
[JavaScript] Spécification de l'encodage d'un document XML	Connaître l'email dans formulaire de candidature web !!!
[HTML]/[PHP] Formulaire boutons radios et onclick	problème de fonction javascript
[JS / DHTML] Validation de formulaire	Code formulaire non-interprété [Résolu] & mémorisation valeurs
Plus de sujets relatifs à : Mon contrôleur de formulaire en javascript

Page générée en 0.130 secondes