Contrôle dynamique de formulaire HTML
Bonjour à tous,
Je développe un site internet et je voudrais vérifier dynamiquement le contenu des champs du formulaire. Pour l'instant, j'appelle une méthode avec onSubmit, mais il faut que je valide avec le bouton "submit" pour que les champs soient corrigés. Comment faire pour qu'ils soient corrigés dynamiquement ?
Voici mon formulaire :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <form class="form" id="form1" name="formulaire" onSubmit="return check();" method="post" >
<!--action="traitement_formulaire.php"-->
<p class="name">
<input name="nom" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Nom" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="message">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Votre message"></textarea>
</p>
<div class="submit">une métho
<input type="submit" value="ENVOYER LE MESSAGE" id="button-blue"/>
<div class="ease"></div>
</div>
</form> |
Et voici mon code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <script language="JavaScript">
//forms
function check() {
var msg = '';
//Vérification du mail s'il n'est pas vide on vérifie le . et @
if (document.getElementById('email').value != '') {
indexAroba = document.getElementById('email').value.indexOf('@');
indexPoint = document.getElementById('email').value.indexOf('.');
if ((indexAroba < 0) || (indexPoint < 0)) {
//dans le cas ou il manque soit le . soit l'@ on modifie la couleur d'arrière plan du champ mail et définissons un message d'alerte
document.getElementById('email').style.backgroundColor = '#FF4000';
document.getElementById('email').style.border = '2px solid #000;';
msg += 'Le mail est incorrect\n';
}
}
//Notre champs mail est vide donc on change la couleur et on défini un autre message d'alerte
else {
document.getElementById('email').style.backgroundColor = '#DF7401';
msg += 'Veuillez saisir votre mail.\n';
}
//ici nous vérifions si le champs nom et vide, changeons la couleur du champs et définissons un message d'alerte
if (document.getElementById('name').value == '') {
msg += 'Veuillez saisir votre nom\n';
document.getElementById('name').style.backgroundColor = '#DF7401';
}
else {
document.getElementById('email').style.backgroundColor = '#39cf85';
}
//meme manipulation pour le champ commentaire
if (document.getElementById('comment').value == '') {
msg += 'Veuillez saisir votre message\n';
document.formulaire.message.style.backgroundColor = '#FF4000';
}
//Si aucun message d'alerte a été initialisé on retourne TRUE
if (msg == '')
return (true);
//Si un message d'alerte a été initialisé on lance l'alerte
else {
alert(msg);
return (false);
}
}
</script> |
Merci pour votre aide :)
