Demo 15 :: JQuery Forms

If you have done many websites that have forms in them, you know how much of a pain it is to validate them before they are sent to ensure it is good. One of the many things that jQuery does is make forms a lot less of a hassle. With a simple validate script from the jQuery library and your own script of what you want validated, forms are a breeze. Check out the form below for what you can do with jQuery.

Create an Account

Please Fill in all the Required (*) Fields

View the HTML code

<script type="text/javascript" src="../lib/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../lib/js/additional-methods.min.js"></script>

<form action="" id="validateExample">
    <fieldset>
        <legend>Please Fill in all the Required Fields</legend>
        <div>
            <label for="name">Name:</label>
            <input name="name" id="name" type="text"/>
        </div>
        <div>
            <label for="email">Email:</label>
            <input name="email" id="email" type="text"/>
        </div>
        <div>
            <label for="website">URL:</label>
            <input name="website" id="website" type="text" />
        </div>
        <div>
            <label for="phone">Phone (10 digits):</label>
            <input name="phone" id="phone" type="text" />
        </div>      
        <div>
            <label for="password">Password:</label>
            <input name="password" id="password" type="password" />
        </div>   
        <div>
            <label for="passconf">Re-Type Password:</label>
            <input name="passconf" id="passconf" type="password" />
        </div>      
        <div>
            <input type="submit" value="Submit" />
        </div>
    </fieldset>
</form>

View the jQuery code

$(document).ready(function(){
    $('#validateExample').validate({//starts the process of validating the form with the id of validateExample
        rules: {//sets up a rules object to validate the form
            name: {//the name field
                required: true,//field is required
            },
            email: {//email field
                required: true,
                email: true//plugin method to validate an email
            },
            website: {//URL field
                url: true//plugin method to validate URL string
            },
            phone: {//phone field
                phoneUS: true//plugin method from additional-methods script to validate a US phone number
            },
            password: {//password field
                minlength: 6,//requires at least six characters
                required: true
            },
            passconf: {//confirmation of password field
                equalTo: "#password"//field content must match the content of #password
            }
        },
        success: function(label) {//if the field validates...
            label.text('Valid!').addClass('valid');///create a label with text saying Valid! and give it a class
        }
    });
});