Contrôle dynamique de formulaire HTML

**Polychinelle** · 13/01/2017, 15h30

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 :

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>

Merci pour votre aide

**NoSmoking** · 14/01/2017, 07h54

Bonjour,

Comment faire pour qu'ils soient corrigés dynamiquement ?

un des techniques est de mettre en oeuvre la vérification sur un événement comme onblur par exemple, avec un appel du type

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" onblur="verifChamp(this)" placeholder="votre texte" value="">

Nota : n'abuse pas des ID si tu n'en as pas besoin !

**Polychinelle** · 16/01/2017, 22h04

J'ai réussi. C'était effectivement des évènements onblur qu'il fallait placer. Voici mon formulaire :

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
<form class="form" id="form1" name="formulaire"  > <!-- onsubmit="check();" method="post" action="traitement_formulaire.php"-->
 
<p class="name">
	<span id="name-error" class="erreur">Veuillez saisir votre nom</span>
	<input name="nom" type="text" onblur="check_nom()" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Nom" id="name" />
</p>
 
<p class="email">
	<span id="email-error" class="erreur">Le mail est incorrect</span>
	<input name="email" onblur="check_mail()" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />							
</p>
 
<p class="message">
	<span id="comment-error" class="erreur">Veuillez saisir votre message</span>
	<textarea name="text" onblur="check_comment()" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Votre message"></textarea>							
</p>
 
 
<div class="submit">
	<input type="submit" value="ENVOYER LE MESSAGE" id="button-blue"/>
	<div class="ease"></div>
</div>
</form>

Et voici mon script JS :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script language="JavaScript">
 
function check_nom() {
var msg = "";
 
//Vérification du champ nom
 
if (document.getElementById("name").value == "")	{
 
msg += "Veuillez saisir votre nom\n";
document.getElementById("name").style.backgroundColor = "#f34949";
}
else {
document.getElementById("name").style.backgroundColor = "#39cf85";
}
//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	{
document.getElementById("name-error").style.display = 'block';
return(false);
}
}
 
function check_mail() {
var msg = "";
 
//Vérification du mail s'il n'est pas vide on vérifie le . et @
 
if (document.getElementById("email").value != "" && document.getElementById("email").value.length < 5)	{
 
indexAroba = document.getElementById("email").value.indexOf('@');
indexPoint = document.getElementById("email").value.indexOf('.');
 
if ((indexAroba < 0) || (indexPoint < 0))		{
 
//dans le cas ou pas de . ni d'@ modification couleur arrière plan du champ mail et un message d'alerte
 
document.getElementById("email").style.backgroundColor = "#f34949";
msg += "Le mail est incorrect\n";
 
/*var divs = document.getElementsByTagName('onblur');
for(var i=0; i<divs.length; i++){
	if(divs[i].className == "feedback-input"){
		divs[i].style.border = "#000 solid 4px;";
	}
}*/						
}
else {
document.getElementById("email").style.backgroundColor = "#39cf85";
msg = "";
}
}
else {
document.getElementById("email").style.backgroundColor = "#f34949";
msg += "Le mail est incorrect\n";
}
//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	{
document.getElementById("email-error").style.display = 'block';
return(false);
}
}
 
function check_comment() {
var msg = "";
 
//Vérification du champ commentaire
 
if (document.getElementById("comment").value == "")	{
 
msg += "Veuillez saisir votre message\n";
document.getElementById("comment").style.backgroundColor = "#f34949";
}
else {
document.getElementById("comment").style.backgroundColor = "#39cf85";
}
//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	{
document.getElementById("comment-error").style.display = 'block';
return(false);
}
}
</script>

Il me reste juste un problème à résoudre. Je veux vérifier le nombre de caractères insérés dans le champ et la condition "document.getElementById("email").value.length < 5" n'a pas l'air de fonctionner. Je ne sais pas pourquoi.

Par ailleurs, je cherche à empêcher la validation du formulaire tant que les champs ne sont pas corrects. Comment peut-on faire ça ?

@ +

**NoSmoking** · 18/01/2017, 18h43

Première chose, pense à factoriser tes fonctions par la « mise en cache » de certains éléments, on gagne en lisibilité, maintenance et performance

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
function check_mail() {
    var msg = '';
    var oMail = document.getElementById('email');
    var txt = oMail.value;
 
    //Vérification du mail s'il n'est pas vide on vérifie le . et @
    if (txt != '' && txt.length < 5) {
        indexAroba = txt.indexOf('@');
        indexPoint = txt.indexOf('.');
        if ((indexAroba < 0) || (indexPoint < 0)) {
            //dans le cas ou pas de . ni d'@ modification couleur arrière plan du champ mail et un message d'alerte
            oMail.style.backgroundColor = '#f34949';
            msg += 'Le mail est incorrect\n';
        } 
        else {
            oMail.style.backgroundColor = '#39cf85';
            msg = '';
        }
    } 
    else {
        oMail.style.backgroundColor = '#f34949';
        msg += 'Le mail est incorrect\n';
    }
    //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 {
        document.getElementById('email-error').style.display = 'block';
        return (false);
    }
}

Si l'on prend cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (txt != '' && txt.length < 5)

on peut la traduire par SI le texte est NON VIDE ET que ça longueur est INFERIEURE à 5 ALORS, je ne suis pas sûr que ce soit ce que tu cherches.

Tu peux également t'appuyer sur les input type="email" même si le support n'est pas encore des meilleurs, au pire le type sera repris comme du texte.

**Polychinelle** · 18/01/2017, 20h40

C'est bon ça marche !

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script language="JavaScript">
 
function check_nom() {
	var msg = "";
 
	//Vérification du champ nom
 
	if (document.getElementById("name").value == "")	{
 
		msg += "Veuillez saisir votre nom\n";
		document.getElementById("name").style.backgroundColor = "#f34949";
	}
	else {
		document.getElementById("name").style.backgroundColor = "#39cf85";
		document.getElementById("name-error").style.display = 'none';
	}
	//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	{
		document.getElementById("name-error").style.display = 'block';
		return(false);
	}
}
 
function check_mail() {
	var msg = '';
	var oMail = document.getElementById('email');
	var txt = oMail.value;
 
	//Vérification du mail s'il n'est pas vide on vérifie le . et @
	if (txt != '' && txt.length > 5) {
		indexAroba = txt.indexOf('@');
		indexPoint = txt.indexOf('.');
		if ((indexAroba < 0) || (indexPoint < 0)) {
			//dans le cas ou pas de . ni d'@ modification couleur arrière plan du champ mail et un message d'alerte
			oMail.style.backgroundColor = '#f34949';
			msg += 'Le mail est incorrect\n';
		} 
		else {
			oMail.style.backgroundColor = '#39cf85';
			document.getElementById('email-error').style.display = 'none';
			msg = '';
		}
	} 
	else {
		oMail.style.backgroundColor = '#f34949';
		msg += 'Le mail est incorrect\n';
	}
	//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 {
		document.getElementById('email-error').style.display = 'block';
		return (false);
	}
}
 
function check_comment() {
	var msg = "";
 
	//Vérification du champ commentaire
 
	if (document.getElementById("comment").value == "")	{
 
		msg += "Veuillez saisir votre message\n";
		document.getElementById("comment").style.backgroundColor = "#f34949";
	}
	else {
		document.getElementById("comment").style.backgroundColor = "#39cf85";
		document.getElementById("comment-error").style.display = 'none';
	}
	//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	{
		document.getElementById("comment-error").style.display = 'block';
		return(false);
	}
}
</script>

Effectivement, ma condition n'était pas bonne... Comment faire pour exécuter le script PHP uniquement si les champs sont corrects ?

**Polychinelle** · 18/01/2017, 23h00

Pour améliorer la vérification, je pensais à mettre un écouteur keyup. On peut remplacer "Onblur" par "Keyup" ?

**Watilin** · 19/01/2017, 18h32

Ne remplace pas blur. Tu peux ajouter un keyup ou keypress, ça ne rentrera pas en conflit avec le blur présent.

Il y a une différence entre keyup et keypress : keypress n’est lancé que lorsqu’un caractère visible est tapé. keyup est lancé également si l’utilisateur appuie, entre autres, sur majuscule ou ctrl ou les flèches directionnelles, etc.

L’utilisation d’un keyup ou keypress peut s’avérer agaçant car il réagira dès que l’utilisateur commence à taper. Comme un début d’adresse mail n’est pas valide, l’utilisateur verra un message d’alerte tant qu’il n’aura pas fini de taper. À toi de voir si c’est acceptable ou pas.

Tu peux mettre en œuvre un délai sur les évènements clavier avec un setTimeout. À chaque fois que l’utisateur frappe, le timer est remis à zéro, et ta « vraie » fonction n’est appelée que si le timer n’a pas été annulé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var timer;
 
function check() {
  // ta « vraie » fonction
  …
}
 
champ.onkeypress = function () {
  clearTimeout(timer);
  timer = setTimeout(check, 500); // 500 ms = 0.5 s
}

**NoSmoking** · 19/01/2017, 18h52

Comment faire pour exécuter le script PHP uniquement si les champs sont corrects ?

Tu n'as pas d'autres choix que de faire tous les tests.

Pour améliorer la vérification, je pensais à mettre un écouteur keyup.

comme dit par Watilin « peut s’avérer agaçant » (il est très poli ce garçon !) et en fait tu n'amélioreras rien du tout ou alors pas grande chose, ce qui va compter le plus c'est que ces vérifications soient faites coté serveur.

Même si non complétement supporté n'hésite pas à utiliser les <input> type HTML5 et l'attribut required.

Contrôle dynamique de formulaire HTML

JavaScript

Discussions similaires

Partager

Partager