Getting started with jQuery Validate plugin

Remarks#

This section provides an overview of what jquery-validate is, and why a developer might want to use it.

It should also mention any large subjects within jquery-validate, and link out to the related topics. Since the Documentation for jquery-validate is new, you may need to create initial versions of those related topics.

Installation or Setup

Include the plugin from a CDN or locally after including jQuery. Then attach the .validate() method to the form in order to initialize the plugin. Within this method you can define your rules, custom messages, and other 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>

Every input considered for validation must contain a unique name attribute; and this is how the plugin keeps track of the inputs. The corresponding HTML markup:

<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>