jQuery Validation Plugin Template

jQuery Validation Plugin makes html form validation easier. You need to setup jQuery and jQuery Validation Plugin to make it works.

Header:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

Script:

<script>
$(function() {
    $( "#formId" ).validate({
        errorClass: 'alertText smallText',
        rules: {
            email: {
                required: true,
                email: true
            },
            username: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            email: {
                required: 'Please input email',
                email: 'The email format is invalid'
            },
            username: 'Please input username',
            password: 'Please input password'
        }
    });
});
</script>

Form:

<form id="fromId" action="" method="post">
    <fieldset>
        <p>
            <input type="text" name="email" placeholder="email" value="" />
        </p>
        <p>
            <input type="text" name="username" placeholder="username" value="" />
        </p>
        <p>
            <input type="text" name="password" placeholder="password" value="" />
        </p>
        <p>
            <input type="submit" name="submit" value="Go" />
        </p>
    </fieldset>
</form>