Premiers pas avec le plug-in jQuery Validate

Installation ou configuration #

Incluez le plugin à partir d’un CDN ou localement après avoir inclus jQuery. Attachez ensuite la méthode .validate() au formulaire afin d’initialiser le plugin. Dans cette méthode, vous pouvez définir vos règles, vos messages personnalisés et d’autres options.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script>
    $(document).ready(function() {  // <-- ensure form's HTML is ready
    
        $("#myform").validate({  // <-- initialize plugin on the form.
            // your rules and other options,
            rules: {
                first_name: {  // <-- this is the name attribute, NOT id
                    required: true
                },
                last_name: {
                    required: true
                },
                phone: {
                    required: true,
                    digits: true
                }
            }
        });
    
    });
</script>

Chaque entrée considérée pour la validation doit contenir un attribut name unique ; et c’est ainsi que le plugin garde une trace des entrées. Le balisage HTML correspondant :

<form id="myform">
    <input type="text" name="first_name" /><br/>
    <input type="text" name="last_name" /><br/>
    <input type="text" name="phone" /><br/>
    <input type="submit" />
</form>