Validation Formulaire plugin jQuery Validity

validity


Un nouveau vient de faire son apparition, il permet de gérer la validation des formulaires et améliorer ainsi l’expérience utilisateur

est un puissant plugin jQuery pour la validation des formulaires et la vérification des champs de saisies coté client pour éviter les erreurs de saisies et ainsi que l’utilisateur aille au bout du processus commencé.

Ce plugin est ultra-léger (9kb) et peut s’adapter à la plupart des validations de champs (email, date, nombre, url, temps, formatage tel que le téléphone et code postal, et plus…).

Il permet aussi de déterminer le type d’affichage pour les messages d’erreurs afin de les rentre efficaces et ergonomique vis à vis du site.

Source HTML

<html>
        <head>
            <title>Simple</title>

            <link type="text/css" rel="Stylesheet" href="jquery.validity.css" />
            <script type="text/javascript" src="jquery.js"> </script>
            <script type="text/javascript" src="jquery.validity.js"> </script>

            <script type="text/javascript">

                //
                // This is where validation rules are assigned:
                //

                $(function() { 

                    $("form").validity(function() {

                        $("#vehicles")
                            .require()
                            .match("number")
                            .range(4, 12);

                        $("#dob")
                            .require()
                            .match("date")
                            .lessThanOrEqualTo(new Date());

                    });

                });

                //
                // That's it!
                // No more setup is necessary!
                //

            </script>

        </head>

        <body>

            <form method="get" action="simple.htm">
                Number of Vehicles:
                <input type="text" id="vehicles" name="vehicles" title="Vehicle Count" />
                <br /><br />
                Date of birth:
                <input type="text" id="dob" name="dob" title="Birthday" />
                <br /><br />
                <input type="submit" />
            </form>

        </body>
    </html>

Site officiel: Validity
Démo et documentations: Démo
Blog: Blog
Téléchargement: Télécharger

A voir aussi