Valider un formulaire en JQuery

D0pu
Javascript 
<head>
<link rel="stylesheet" type="text/css" href="includes/css/style.css" />
<script type="text/javascript" language="Javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $("#pseudo").keyup(function(){
            if(!$("#pseudo").val().match(/^[a-z0-9]{5,16}$/i)){
                $("#pseudo").next(".valide-message").hide().text("");
                $("#pseudo").next(".error-message").show().text("Veuillez entrer un pseudonyme valide.");
            }
            else{
                $("#pseudo").next(".error-message").hide().text("");
                $("#pseudo").next(".valide-message").show().text("Le pseudonyme est valide.");
            }
        });
    });
</script>
</head>
<form action="includes/addcom.php" method="post">
            Pseudo : <input type="text" name="pseudo" id="pseudo" /><span class="error-message"></span><span class="valid-message"></span><br />
            Mail : <input type="text" name="mail" id="mail" /><br />
            Mot de Passe : <input type="password" name="password" id="password" /><br />
            <textarea name="contenu" style="width:350px;height:150px;"></textarea>
            <input type="submit" value="Envoyer" id="envoyer" />
            <input type="hidden" name="news_id" value="<?php echo $idNews ?>"/>
        </form>

Bonjour,

Je débute en Php, CSS, JS, en tout :)
Voici mon code mais je sais pas ce qu'il va pas. La condition fonctionne mais quand le message "Le pseudonyme est valide." ne s'affiche pas...

Merci d'avance.
Amicalement,
D0pu.

6 réponses

D0pu
Auteur
Réponse acceptée

Bon bah j'ai trouvé et merci pour tes conseils.

<head>
<link rel="stylesheet" type="text/css" href="includes/css/style.css" />
<script type="text/javascript" language="Javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $("#pseudo").keyup(function(){
            if(!$("#pseudo").val().match(/^[a-z0-9]{5,16}$/i)){
                $("#pseudo").next().next(".valide-message").hide().text("");
                $("#pseudo").next(".error-message").show().text("Veuillez entrer un pseudonyme valide.");
            }
            else{
                $("#pseudo").next(".error-message").hide().text("");
                $("#pseudo").next().next(".valide-message").show().text("Le pseudonyme est valide.");
            }
        });
    });
</script>
</head>

<form action="includes/addcom.php" method="post">
            Pseudo : <input type="text" name="pseudo" id="pseudo" /><span class="error-message"></span><span class="valide-message"></span><br />
            Mail : <input type="text" name="mail" id="mail" /><br />
            Mot de Passe : <input type="password" name="password" id="password" /><br />
            <textarea name="contenu" style="width:350px;height:150px;"></textarea>
            <input type="submit" value="Envoyer" id="envoyer" />
            <input type="hidden" name="news_id" value="<?php echo $idNews ?>"/>

        </form>

Déjà j'avais oublié les E à "valide-message et pour accéder au span class="valide-message" j'ai rajouté un next() à la fonction.

Mirrix

Essaye avec blur au lieu de keyup
Car avec keyup des que tu tappes ta premiere lettre la condition est fausse, du coup comme tu fais pas de hide() de .error_message quand le pseudo est valide tu auras toujours le message d'erreur je pense.

A confirmer.

D0pu
Auteur

Merci pour ta réponse.
J'ai réussi à faire disparaître le error-message (voir le code) mais il ne veut toujours pas mettre le valide-message...

Mirrix

Pourquoi ne fais tu pas qu'un seul span dans lequel tu mets le message que tu veux ?

Tu peux tester ce code la si tu veux, normalement il marche.

<head>
<link rel="stylesheet" type="text/css" href="includes/css/style.css" />
<script type="text/javascript" language="Javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $("#pseudo").keyup(function(){
            if(!$("#pseudo").val().match(/^[a-z0-9]{5,16}$/i)){
                $(".message").empty();
                $(".message").html("Veuillez entrer un pseudonyme valide.");
            }
            else{
                $(".message").empty();
                $(".message").html("Le pseudonyme est valide.");
            }
        });
    });
</script>
</head>

<form action="includes/addcom.php" method="post">
            Pseudo : <input type="text" name="pseudo" id="pseudo" /><span class="message"></span><br />
            Mail : <input type="text" name="mail" id="mail" /><br />
            Mot de Passe : <input type="password" name="password" id="password" /><br />
            <textarea name="contenu" style="width:350px;height:150px;"></textarea>
            <input type="submit" value="Envoyer" id="envoyer" />
            <input type="hidden" name="news_id" value="<?php echo $idNews ?>"/>

</form>
D0pu
Auteur

Je ne mets pas un seul message car y'a un "design" pour chaque message et je compte faire des vérifications partout :-)
error-message = Croix rouge + le message
valide-message = Check vert + le message

Mirrix

Sur mon site j'avais joué avec le css en faisant ca :

<head>
<link rel="stylesheet" type="text/css" href="includes/css/style.css" />
<script type="text/javascript" language="Javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $("#pseudo").keyup(function(){
            if(!$("#pseudo").val().match(/^[a-z0-9]{5,16}$/i)){
                $(".valid-message").css("style","display:none");
                $(".error-message").css("style","display:block");
            }
            else{
                $(".error-message").css("style","display:none");
                $(".valid-message").css("style","display:block");
            }
        });
    });
</script>
</head>

<form action="includes/addcom.php" method="post">
            Pseudo : <input type="text" name="pseudo" id="pseudo" />
            <div class="error-message" id="errormsgid" style="display:none;"></div>
            <div class="valid-message" id="validmsgid" style="display:none;"></div><br /><br />
            Mail : <input type="text" name="mail" id="mail" /><br />
            Mot de Passe : <input type="password" name="password" id="password" /><br />
            <textarea name="contenu" style="width:350px;height:150px;"></textarea>
            <input type="submit" value="Envoyer" id="envoyer" />
            <input type="hidden" name="news_id" value="<?php echo $idNews ?>"/>

</form>

Apres dans ton CSS tu créés tes classes qui vont bien avec tes images