Comment valider un formulaire avec jQuery

Posted on by

Valider un formulaire en javascript est quelque chose qu’on a tous fais 1000 fois et si on se simplifiai la tache en ne le fesant plus et qu’on laissait jQuery nous aider a le faire une bonne fois pour toute.

Ca serai pas bien ?

et la vous allez me dire , VOUI !

en gros tous les champs qu’on veut obligatoire porteront la class css « required » (class= »required ») ça ne vous empêche pas de lui attribuer d’autre class hein ^^ (class= »blu required niceclass »)

La fonction de validation jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery.fn.verifyForm = function() {
    var error = false;
    $('.required').each(function() {
            if(this.value == '') {
                $(this).css('border', '1px solid red');
                $('label[for="'+ this.id +'"]').css('color', 'red');
                if(!error) {
                    error = true;
                }
            } else {
                if($(this).css('border') == '1px solid red') {
                    $(this).css('border', '');
                    $('label[for="'+ this.id +'"]').css('color', '');
                }
            }
        });
    return error;
}

Un peu de html pour que vous puissiez tester (vous voyez que je ne suis pas si fainéant ^^)

1
2
3
4
5
6

<form id="form" method="post" action="post.php">
<input type="text" name="login" id="login" class="required"/><label for="login">Login</label>
<input type="password" name="password" id="password" class="password required"/><label for="password">Mot de passe</label>
<input type="checkbox" name="rememberme" id="rememberme" class="checkbox"/><label for="rememberme">Se souvenir de moi ?</label>
<input type="submit" value="Envoyer"/>
</form>

Comment qu’on s’en sert père castor ?!

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function() {
        $('#form').submit(function() {
                    var error = $('form').verifyForm();
                    if(!error) {           
                        $('#form').submit();
                        return true;
                    } else {
                        alert('Merci de remplir tous les champs marqués en rouge.');
			return false;
                    }
		})
});

A vous de testez et de voir ce que vous pouvez en faire (celui au fond qui a dit « rien ! » sort !!!)

Rien de bien méchant, pour une validation plus avancer des champs comme la validation des emails, la comparaison des mots de passe, etc… , c’est a vous de jouer.

bisous

Comments are closed.