How to make Smooth jQuery validator for Forms

How to make Smooth jQuery validator for Forms

2 40135

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:

Param name Type Default
className – class name for error elements. string validator_error
trigger – list of events which will trigger on validation (separated by space). string change blur
format – format of the field. Table below will tell its details string null
invalidEmpty – invalid if empty? if yes(true) – it will generate error when it empty. bool false
minLength – min length for valid case. integer null
maxLength – max length for valid case. integer null
minValue – min value for element (for numbers only). integer null
maxValue – max value for element (for numbers only). integer null
contains – if element will contain this text – it will valid. string, regexp null
notContains – if element will Not contain this text – it will valid. string, regexp null
equals – if not null, value of element should be equal to this parameter to be valid. string null
notEquals – if not null, value of element should be Not equal to this parameter to be valid. string null
checked – (for checkboxes). to be valid = it thould be true (checking for check/uncheck state) bool null

format param types:

Name Examples
email – checking for Emails. [email protected]
ip – checking for IP addresses. 0.0.0.0 – 255.255.255.255
date – checking for Dates. mm/dd/yyyy, mm-dd-yyyy, mm.dd.yyyy, mm dd yyyy
datetime – checking for Datetimes. hh:mm, hh.mm, hh-mm, hh mm (with combination with dd,mm,yyyy)
phone – checking for Phones. 555999888777 (10-15 digits)
zipUS – checking for US zip codes. 12345-5555 (5 or 9 digit formats)
zipCanada – checking for Canada zip codes. K1A 0B1
creditCard – checking for Credit card number. 4111111111111111 (13-16 digits)
numeric – checking for Digits. 0-9
decimal – checking for Decimals. 100,100.50
alphanumeric – checking for Text. a-zA-Z -_. (commonly – all UTF8 symbols)

Live Demo

Conclusion

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

SIMILAR ARTICLES


2 COMMENTS

  1. Very nice form but could you also write a tutorial about the ‘backend’ of such a form?
    I mean the php-stuff.

    • Hi, commonly this is another side (PHP) – server side. In this side we accepting sent data and perform actions with it.
      I can advice next variables passing: mysql_real_escape_string(strip_tags($_POST[‘params’]))
      It will make all came information – safe.
      After, you can even add this (as example as new member) to your database.

Leave a Reply