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 : 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
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.