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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 :
Merci pour votre aide
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Partager