IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Contrôle du Formulaire


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2006
    Messages
    37
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2006
    Messages : 37
    Par défaut Contrôle du Formulaire
    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.

  2. #2
    Membre éclairé Avatar de Pymento
    Homme Profil pro
    Ingé. Info.
    Inscrit en
    Janvier 2008
    Messages
    366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingé. Info.

    Informations forums :
    Inscription : Janvier 2008
    Messages : 366
    Par défaut
    Avec juste ce code, les textes en rouge sont forcément visible. Il manque peut être le css ?

  3. #3
    Membre averti
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2006
    Messages
    37
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2006
    Messages : 37
    Par défaut
    Le problème ne se posant que pour le navigateur de l'iPhone et de l'iPad, je pensais que ces 2 lignes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 :dans le style de chaque paragraphe.

    Et ça a l'air de fonctionner.

    Merci bien

  4. #4
    Membre éclairé Avatar de Pymento
    Homme Profil pro
    Ingé. Info.
    Inscrit en
    Janvier 2008
    Messages
    366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingé. Info.

    Informations forums :
    Inscription : Janvier 2008
    Messages : 366
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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...

Discussions similaires

  1. [PHP-JS] Classe de contrôle de formulaire
    Par MV1908 dans le forum Langage
    Réponses: 4
    Dernier message: 10/10/2006, 00h01
  2. Réponses: 1
    Dernier message: 21/07/2006, 05h56
  3. Les contrôles de formulaire, quel test optimal ?
    Par GTJuanpablo dans le forum Langage
    Réponses: 8
    Dernier message: 26/04/2006, 10h00
  4. accéder à un contrôle de formulaire avec un nom de tableau
    Par jibouze dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 30/06/2005, 23h57
  5. [JSP] [STRUTS] Contrôle de formulaire
    Par babylone7 dans le forum Servlets/JSP
    Réponses: 5
    Dernier message: 13/07/2004, 17h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo