Plugin de validation de formulaire

Par siriu, il y a 14 ans


Bonjour,

Je suis à la recherche d'un plugin Jquery de validation de formulaire. Si vous en connaissez un bon, je suis preneur de vos liens :)

3 réponses

zvetlania, il y a 14 ans

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