Forum : Plugin de validation de formulaire

Quand je cherche un plugin moi jpasse par delicious : http://www.delicious.com/search?p=jquery+form+validation&chk=&context=main|&fr=del_icio_us&lc=

Par contre je n'en ai jamais utilisé :(

zvetlania

Salut, moi perso pour tester la validation d'un formulaire, je combine jquery et les expressions régulières.

Alors je ne pense pas que ça soit l'idéal, car si j'ai 50 trucs à vérifier, j'aurai 50 variables... mais j'en ai souvent 3-4 maxi donc le code passe bien, je trouve.
Là je te fais un exemple, avec le formulaire, et à droite, soit une croix ( false.png ) soit un 'V' ( true.png )
le formulaire :

<script type="text/javascript" src="js/valid.js"></script>
    <form method=POST action= "./envoiMail.php" >

        <label>Email</label>
            <input id="mail" type=text name=email size=30 value="Entrez votre adresse e-mail">
            <a class="ok-message"></a>
            <a id="error"class="error-message"></a>
        <input type="submit" value="Envoyer" id="envoyer" >
    </form>

En fait à chaque input, je rajoute 2 boutons ( ok et erreur ).

Le css :

.error-message{
    background: url(../img/false.png) center no-repeat;
    padding: 0 0 0 30px;
    float: right;
    color: #ff5b5b;
    height: 31px;
    width: 32px;
    margin-top: -5px;
    border-left: 1px solid #777777;
}
.ok-message{
    background: url(../img/true.png) center no-repeat;
    padding: 0 0 0 30px;
    float: right;
    height: 31px;
    width: 32px;
    color: #54b00a;
    margin-top: -5px;
    border-left: 1px solid #777777;
}

et la page valid.js

$(function(){
        $("#error").show(); $("#error").prev(".ok-message").hide();  
        a=0; 
$("#mail").keyup(function(){
            if (!$("#mail").val().match(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/))
            {
                $("#error").prev(".ok-message").hide();
                $("#error").show();
                a = 0;
            }
            else
            {
                $("#error").hide();
                $("#error").prev(".ok-message").show();
                a = 1;
            }});
$("#envoyer").click(function(){
            else if(a==0){valid = false; alert('Veuillez remplir votre adresse mail');}
            else{valid = true}
            return(valid);
        });
        });

Donc en fait if (!$("#mail").val().match(/^([A-Za-z0-9_-.])+\@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/)) c'est l'expression régulière qui vérifie si c'est alphanumérique, avec un @, encore de l'alphanumérique et entre 2 et 4 caractères après le dernier "." ( genre .com )
Je ne m'y connais pas assez pour bien t'expliquer les expressions régulières, et le js n'est pas optimal, mais ça marche.

Et comme d'hab, merci à grafikart pour un de ses tutos ;)
le tuto sur les expressions régulières : http://www.grafikart.fr/tutoriels/php/expression-reguliere-86

FuFu

TRES TRES BON PLUGIN :)

Plugin de validation de formulaire

3 réponses