How to make Smooth jQuery validator for Forms

Today I will tell about jquery validator – how to build professional web forms with validation. I will use jQuery Validator Plugin for our tutorial.

You can ask me – where I can use it? – Quite anywhere: login or join forms for your website, forms of adding content, different guest books or blocks for comments. Really many ways for using it. I already saw several projects where validation was at server side. And submit of form just reload whole page where we seens – are we made any errors or not. Sometimes webmasters using ajax to send data invisible to server for validation. But in most of cases, this is much faster just to check all entered information at user side (using javascript/jQuery). Just check these several demos – and I will explain how to use it.

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. HTML

This is single HTML file with all 3 samples of our lesson

index.html

<script src="js/jquery.min.js"></script>
<script src="js/jquery.validator.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.validator.css" type="text/css" />
<div class="examples">
    <div class="example"><h2>jQuery validator - checking forms</h1></div>
    <div class="example" id="login_form">
        <h2>Sample 1 - login form</h2>
        <div><label>Username: </label> <input type="text" id="username" /><span id="vres_username" class="result"></span></div>
        <div><label>Password: </label> <input type="password" id="password" /><span id="vres_password" class="result"></span></div>
        <div><button>Login</button></div>
    </div>
    <div class="example" id="join_form">
        <h2>Sample 2 - join (registration) form</h2>
        <div><label>Username: </label> <input type="text" id="username" /><span id="vres_username" class="result"></span></div>
        <div><label>Password: </label> <input type="password" id="password" /><span id="vres_password" class="result"></span></div>
        <div><label>Email: </label> <input type="text" id="email" /><span id="vres_email" class="result"></span></div>
        <div><label>DateOfBirth: </label> <input type="text" id="date"><span id="vres_date" class="result">possible formats: mm/dd/yyyy, mm-dd-yyyy, mm.dd.yyyy, mm dd yyyy</span></div>
        <div><button>Join</button></div>
    </div>
    <div class="example" id="news_form">
        <h2>Sample 3 - Adding news</h2>
        <div><label>Title: </label> <input type="text" id="title" /><span id="vres_title" class="result"></span></div>
        <div><label>News text: </label> <textarea id="text" style="width:300px;height:200px;"></textarea><span id="vres_text" class="result"></span></div>
        <div><button>Submit</button></div>
    </div>
    <div style="clear:both"></div>
</div>

Step 2. CSS

Here are 2 used CSS files. Just few styles for our demo page:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:900px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.examples .example{margin-bottom:15px;border-bottom:1px solid #DDD}
.examples .example div{margin-bottom:5px;}
.examples .example .result {margin-left:10px;}

css/jquery.validator.css

.validator_error{background:#FF7C8A;border:1px #9D0505 solid;color:#000}

Step 3. JS

Of course, here are used jQuery file: jquery.min.js and new library: jquery.validator.js. I don`t will include its sources directly in this post – both files available in package. Last file most interesting:

inc/main.js

$(function() {
    // sample 1 - login form
    $('#login_form #username').validator({
        format: 'alphanumeric',
        invalidEmpty: true,
        correct: function() {
            $('#login_form #vres_username').text('Thanks');
        },
        error: function() {
            $('#login_form #vres_username').text('Plese fill username field');
        }
    });
    $('#login_form #password').validator({
        format: 'alphanumeric',
        invalidEmpty: true,
        correct: function() {
            $('#vres_password').text('Thanks');
        },
        error: function() {
            $('#vres_password').text('Plese fill password field');
        }
    });
    // sample 2 - join form
    $('#join_form #username').validator({
        format: 'alphanumeric',
        invalidEmpty: true,
        correct: function() {
            $('#join_form #vres_username').text('Thanks');
        },
        error: function() {
            $('#join_form #vres_username').text('Plese fill your username');
        }
    });
    $('#join_form #password').validator({
        format: 'alphanumeric',
        invalidEmpty: true,
        correct: function() {
            $('#join_form #vres_password').text('Thanks');
        },
        error: function() {
            $('#join_form #vres_password').text('Plese fill password');
        }
    });
    $('#join_form #email').validator({
        format: 'email',
        invalidEmpty: true,
        correct: function() {
            $('#join_form #vres_email').text('Thanks');
        },
        error: function() {
            $('#join_form #vres_email').text('Please fill correct email');
        }
    });
    $('#join_form #date').validator({
        format: 'date',
        invalidEmpty: true,
        correct: function() {
            $('#vres_date').text('Thanks');
        },
        error: function() {
            $('#vres_date').text('Please fill correct date (in format: mm/dd/yyyy, mm-dd-yyyy, mm.dd.yyyy, mm dd yyyy)');
        }
    });
    // sample 3 - adding news form
    $('#news_form #title').validator({
        format: 'alphanumeric',
        invalidEmpty: true,
        correct: function() {
            $('#news_form #vres_title').text('Thanks');
        },
        error: function() {
            $('#news_form #vres_title').text('Plese fill title');
        }
    });
    $('#news_form #text').validator({
        minLength: 5,
        maxLength: 255,
        invalidEmpty: true,
        correct: function() {
            $('#news_form #vres_text').text('Thanks');
        },
        error: function() {
            $('#news_form #vres_text').text('Length of news text should be between 5 and 255 symbols');
        }
    });
});

In this file I draw rules of validation of all my 3 forms. Hope this is very easy to understand how to use it.

Its very easy to add new rule to any new field, just call ‘validator’ function with set of params for that field. Validator itself support next formats: Alphanumeric, Credit Card, Email, Date, Date and Time, Decimal, IP Address, Numeric, Phone, Zip Codes (US and Canada)

Here are all necessay info about params of this library:

format param types:

Live Demo

Conclusion

I hope that today’s article will very useful for your projects. Good luck!