Contrôle du Formulaire

[mao-40]

Bonsoir,

Je découvre Javascript, et je commence par le contrôle d'un formulaire par javascript avant sa validation.
Le principe :
Un message apparaît au dessus de chaque champ mal complété ou vide après appui sur le bouton de validation.

Il fonctionne sur Firefox, Opera, Safari, IE. Par contre j'ai un problème sur iPhone et iPad.

Les messages indiquant les problèmes sur les champs mal complétés et ne devant apparaître qu'à l'appui sur le bouton validation, apparaissent dès le chargement de la page de contact.

Voici le code (pas très propre sûrement )

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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<h1>Contact</h1>
<?php
if(isset($_REQUEST["s_centrale"])){$s_centrale=$_REQUEST["s_centrale"];}else {$s_centrale="";}
 
?>
 
<script>
//<![CDATA[
        function Init()
        {
            p1=document.getElementById("p1");
            p1.style.display="none";
            p2a=document.getElementById("p2a");
            p2a.style.display="none";
            p2b=document.getElementById("p2b");
            p2b.style.display="none";
            p3=document.getElementById("p3");
            p3.style.display="none";
        }
 
 
 
function valider() {
    var inc_erreurs = 0 ;
var message_alert = "" ;
var nom = document.form1.nom.value;
    if ( nom == "" ) {
        p1.style.display="block";
        inc_erreurs = inc_erreurs + 1 ;
    }
    else {
        p1.style.display="none";
        }
 
var mail = document.form1.mail.value;
    if ( mail == "" ) {//mail vide
        p2a.style.display="block";
        p2b.style.display="none";
        inc_erreurs = inc_erreurs + 1 ;
    }
    else {
        var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
 
        if(reg.test(mail))
        {//test mail ok
        p2a.style.display="none";
        p2b.style.display="none";
        }
        else { //mail non vide && non valide
        p2a.style.display="none";
        p2b.style.display="block";
        inc_erreurs = inc_erreurs + 1 ;
        }
    }
var message = document.form1.message.value;
    if ( message == "" ) {
        p3.style.display="block";
        inc_erreurs = inc_erreurs + 1 ;
    }
    else {
        p3.style.display="none";
        }
 
if ( inc_erreurs >= 1 ) {
 
    return false;
 
    }
else if ( inc_erreurs == 0 ) {
    return true;
}
 
}
 
//]]>
 
</script>
<?php if ( $s_centrale != "valid" ) {?>
 
<form action="contact-valid.html" name="form1" onsubmit="return valider(this)" method="post" >
    <fieldset><legend>Formulaire de contact</legend>
    <label>Nom</label>
    <p id="p1" style="font-size:0.7em;color:red;">Merci de renseigner votre Nom</p>
    <input type="text" name="nom"
        value="<?php echo $_POST['nom'] ; ?>"
        onmousemove="this.style.backgroundColor='#eee'"
        onmouseout="this.style.backgroundColor='#fafafa'"
        autofocus /><br />
 
    <label for="email">Mail</label>
    <p id="p2a" style="font-size:0.7em;color:red;">Mail non renseigné</p>
    <p id="p2b" style="font-size:0.7em;color:red;">Mail invalide</p>
    <input type="email" name="mail"
    value="<?php echo $_POST['mail'] ; ?>"
    onmousemove="this.style.backgroundColor='#eee'"
    onmouseout="this.style.backgroundColor='#fafafa'"/><br />
 
    <label>Message</label>
    <p id="p3" style="font-size:0.7em;color:red;">Veuillez compléter votre message</p>
    <textarea cols="50" rows="10" type="text" name="message"
    onmousemove="this.style.backgroundColor='#eee'"
    onmouseout="this.style.backgroundColor='#fafafa'"><?php echo $_POST['message'] ; ?></textarea>
    <br />
 
    <input type="submit" name="envoyer" value="Valider" class="submit" />
 
    </fieldset>
</form>
<?php
}
else { ?> 
 
<h1>Formulaire de contact</h1>
<?php
//$from = $_POST['email'] ;
$to = "merkatua@gmail.com";
$object = "Contact";
$msg= "<b>De : ".htmlspecialchars(stripcslashes($_POST['nom']),ENT_QUOTES)."</b><br /><br />";
$msg.= "<b>Mail :</b> ".htmlspecialchars(stripcslashes($_POST['mail']),ENT_QUOTES)."<br /><br />";
$msg.= "<b>Message :</b> ".htmlspecialchars(nl2br(stripcslashes($_POST['message'])),ENT_QUOTES)."<br /><br />";
$entete .= "From: ".$_POST['mail']."\n"; // expéditeur 
$entete .= "Reply-To: ".$_POST['mail']."\n"; // Adresse de retour, retour à l'envoyeur en cas d'erreur 
$entete .= "X-Mailer: PHP/" . phpversion() . "\n" ; //version
$entete .= "MIME-Version: 1.0\r\n";
$entete .= "Content-type: text/html; charset=utf-8\r\n";
$entete .= "Date: ". date("D, j M Y H:i:s"); //date; 
 
mail ($to, $object, $msg, $entete);
?>
<p>Message envoyé</p>
<?php }
?>

Merci pour votre aide.

[Pymento]

Avec juste ce code, les textes en rouge sont forcément visible. Il manque peut être le css ?

[mao-40]

Le problème ne se posant que pour le navigateur de l'iPhone et de l'iPad, je pensais que ces 2 lignes :

Code :

1
2
p1=document.getElementById("p1");
p1.style.display="none";

suffisaient à cacher les paragraphes puisque cela fonctionnait sur la plupart des navigateurs : Firefox IE 7, Opera, Safari...

Votre réponse m'a fait penser à rajouter ça :

Code :

p1 { display:none; }

dans le style de chaque paragraphe.

Et ça a l'air de fonctionner.

Merci bien

[Pymento]

Il m'est arrivé d'avoir avec le javascript et chrome (moteur webkit aussi) des soucis avec le style si la propriété n'était pas au préalable "instanciée" en dur.
Pour un test tu pourrais faire

Code :

1
2
 
p1 { display:block; }

et si ça réagis en display none, c'est ça.

Ou sinon, ça doit être due à l'ordre d'interprétation de ton code, du genre, le javascript est exécuté avant qu'il interprète p1 donc il fait rien ect...