This JQuery CSS validation tutorial explain how to do client-side validation using jQuery’s validation plugin. This is how the validation snapshot of the validation page. The link to download the code is at end of this tutorial.

This jquery validation is very easy to use and has the good look and feel for the users in the webpage forms and it’s a powerful client Side Validation. The code samples are attached below

Files to be used in the JQuery Validation

• css File (ValidationEngine.Jquery.css)
• JQuery.min.js
• JQuery.validationEngine-en.js
• JQuery.validationEngine.js
• Validation File – Target File

JQuery Configuration

First, you need to include the js files and css files as in the Target File

(samplevalidate.html).

<script type=”text/javascript” src=”jquery.min.js”></script>

<script type=”text/javascript” src=”jquery.validationEngine-en.js”></script>

<script type=”text/javascript” src=” jquery.validationEngine.js “>

And the following script should be in the target file as follows,

<script>

$(document).ready(function()

{

// SUCCESS AJAX CALL, replace “success: false,” by:

success : function() { callSuccessFunction() },

$(“#form”).validationEngine()

//$.validationEngine.loadValidation(“#date”)

//alert($(“#formID”).validationEngine({returnIsValid:true}))

//$.validationEngine.buildPrompt(“#date”,”This is an example”,”error”)

// Exterior prompt build example

// input prompt close example

//$.validationEngine.closePrompt(“.formError”,true)

// CLOSE ALL OPEN PROMPTS

});

</script>

Working Techniques:

Before proceeding with the files used in JQuery validation we must know the usage of the files.

Main HTML file (samplevalidate.html) – here we will be doing the JQuery validation

JS Files – Supporting files to do the validation using JQuery and the

js script to call the function in the target file

CSS File – The layout(size, colors, shape) is defined in the CSS

MAIN HTML FILE

The file is where we need to integrate the JQuery validation

The main Html file will have the following lines

<script type=”text/javascript” src=”jquery.min.js”></script>

<script type=”text/javascript” src=”jquery.validationEngine-en.js”></script>

<script type=”text/javascript” src=” jquery.validationEngine.js “>

<script>

$(document).ready(function()

{

// SUCCESS AJAX CALL, replace “success: false,” by:

success : function() { callSuccessFunction() },

$(“#form”).validationEngine()

//$.validationEngine.loadValidation(“#date”)

//alert($(“#formID”).validationEngine({returnIsValid:true}))

//$.validationEngine.buildPrompt(“#date”,”This is an example”,”error”)

// Exterior prompt build example     // input prompt close example

//$.validationEngine.closePrompt(“.formError”,true)    // CLOSE ALL OPEN PROMPTS

});

</script>

The form part which needs to be validated using JQuery can be something like the below

<form id=”form” method=”post” action=”#”>

<div id=”login”>

<table width=”350px” cellspacing=”15″ cellpadding=”5″ border=”0″ >

<tr>

<th width=”45%” align=”right”>Username</th>

<th width=”5%”>:</th>

<td><input class=”validate[requireds] text-input” id=”username” title=”username” size=”30″></td>

</tr>

<tr>

<th width=”45%”  align=”right”>Password</th>

<th width=”5%”>:</th>

<td><input class=”validate[requireds] text-input”  id=”password” title=”password” size=”30″></td>

</tr>

<tr>

<th id=”submit” colspan=”2″ valign=”top”></td>

<td align=”center”>

<input type=”submit” value=”submit” name=”submit” />

</td>

</tr>

<tr>

<th id=”submit” colspan=”2″ valign=”top”></td>

<td align=”center” valign=”top”>

<a href=”signup.php”><b>Sign up</b></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href=”forgotpassword.php”><b>Forgot Password</b></a>

</td>

</tr>

</table>

</div>

</form>

The necessary controls (textbox,checkbox,radio,select,etc) should have the attributes of class, id and title…

Class:

The class field is useful to specify the type of validation. Like the content data is necessary to validate or optional and is number or is email or required character count. These are possible to validate by the jquery/css validation..

Id:

The id attribute is useful to access value from required controls.

Title:

The title attribute is useful to show the user needed error messages.

JS Files

1.JQuery.Min.js

Download  the code sample –> jquery.min.js

http://code.google.com/p/jqueryjs/downloads/list?can=2&q=jquery.min.js

2.  JQuery.validationEngine-en.js

Download  the code sample –> jquery.validationEngine-en.js

This js is used to define the alert messages. We can customize them as per our need.

(function($) {

$.fn.validationEngineLanguage = function() {};

$.validationEngineLanguage = {

newLang: function() {

$.validationEngineLanguage.allRules =            {“required”:{                                       // Add your regex rules here, you can take telephone as an example

“regex”:”none”,

“alertText”:”* This field is required”,

“alertTextCheckboxMultiple”:”* Please select an option”,

“alertTextCheckboxe”:”* This checkbox is required”},

“requireds”:{                                      // Add your regex rules here, you can take telephone as an example

“regex”:”none”,

“alertText”:”",

“alertTextCheckboxMultiple”:”",

“alertTextCheckboxe”:”"},

“length”:{

“regex”:”none”,

“alertText”:”*Between “,

“alertText2″:” and “,

“alertText3″: ” characters allowed”},

“maxCheckbox”:{

“regex”:”none”,

“alertText”:”* Checks allowed Exceeded”},

“minCheckbox”:{

“regex”:”none”,

“alertText”:”* Please select “,

“alertText2″:” options”},

“confirm”:{

“regex”:”none”,

“alertText”:”* Your field is not matching”},

“telephone”:{

“regex”:”/^[0-9\-\(\)\ ]+$/”,

“alertText”:”* Invalid phone number”},

“email”:{

“regex”:”/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/”,

“alertText”:”* Invalid email address”},

“date”:{

“regex”:”/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/”,

“alertText”:”* Invalid date, must be in YYYY-MM-DD format”},

“onlyNumber”:{

“regex”:”/^[0-9\ ]+$/”,

“alertText”:”* Numbers only”},

“noSpecialCaracters”:{

“regex”:”/^[0-9a-zA-Z]+$/”,

“alertText”:”* No special caracters allowed”},

“ajaxUser”:{

“file”:”validateUser.php”,

“extraData”:”name=eric”,

“alertTextOk”:”* This user is available”,

“alertTextLoad”:”* Loading, please wait”,

“alertText”:”* This user is already taken”},

“ajaxName”:{

“file”:”validateUser.php”,

“alertText”:”* This name is already taken”,

“alertTextOk”:”* This name is available”,

“alertTextLoad”:”* Loading, please wait”},

“onlyLetter”:{

“regex”:”/^[a-zA-Z\ \']+$/”,

“alertText”:”* Letters only”}

}

}

}

})(jQuery);

$(document).ready(function() {

$.validationEngineLanguage.newLang()

});

3. JQuery.validationEngine.js

Download  the code sample –> jquery.validationEngine.js

http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js

This js files is used for the validation of the form

CSS FILE:

The styles for the message are defined in this css.

.formError {

position:absolute;

top:300px; left:300px;

padding-bottom:13px;

display:block;

z-index:5000;

}

#debugMode{

background:#000;

position:fixed;

width:100%; height:200px;

top:0; left:0;

overflow:scroll;

opacity:0.8;

display:block;

padding:10px;

color:#fff;

font-size:14px;

z-index:100000;

}

.ajaxSubmit{ padding:20px; background:#55ea55;border:1px solid #999;display:none}

.formError .formErrorContent {

width:100%;

background:#ee0101;

color:#fff;

width:150px;

font-family:tahoma;

font-size:11px;

border:2px solid #ddd;

box-shadow: 0px 0px 6px #000;

-moz-box-shadow: 0px 0px 6px #000;

-webkit-box-shadow: 0px 0px 6px #000;

padding:4px 10px 4px 10px;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;}

.greenPopup .formErrorContent {background:#33be40;}

.blackPopup .formErrorContent {background:#393939;color:#FFF;}

.formError .formErrorArrow{

position:absolute;

bottom:0;left:20px;

width:15px; height:15px;

z-index:5001;

}

.formError .formErrorArrowBottom{top:0;margin:-6px;}

.formError .formErrorArrow div{

border-left:2px solid #ddd;

border-right:2px solid #ddd;

box-shadow: 0px 2px 3px #444;

-moz-box-shadow: 0px 2px 3px #444;

-webkit-box-shadow: 0px 2px 3px #444;

font-size:0px; height:1px; background:#ee0101;margin:0 auto;line-height:0px; font-size:0px; display:block;

}

.formError .formErrorArrowBottom div{

box-shadow: none;

-moz-box-shadow: none;

-webkit-box-shadow: none;

}

.greenPopup .formErrorArrow div{background:#33be40;}

.blackPopup .formErrorArrow div{background:#393939;color:#FFF;}

.formError .formErrorArrow .line10{width:15px;border:none;}

.formError .formErrorArrow .line9{width:13px;border:none;}

.formError .formErrorArrow .line8{width:11px;}

.formError .formErrorArrow .line7{width:9px;}

.formError .formErrorArrow .line6{width:7px;}

.formError .formErrorArrow .line5{width:5px;}

.formError .formErrorArrow .line4{width:3px;}

.formError .formErrorArrow .line3{width:1px;

border-left:2px solid #ddd;

border-right:2px solid #ddd;

border-bottom:0px solid #ddd;}

.formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;}

.formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;}

Customizing the JQuery validation:

We can customize the appearance of JQuery validation by altering the css file

Some of the Examples for the form controls,

Example to the validation

E.x : 1

Text Box Value Validation:

<input type=”text” id=”first_name” title=”first name”>

E.x : 2

Email Validation:

<input type=”text” title=”email” >

E.x : 3

Select Box Validation:

<select class=”validate[requireds]” title=”file type”>

Class :

The class field is useful to specify the type of validation. Like the content data is necessary to validate or optional and is number or is email or required character count. These are possible to validate by the jquery/css validation..

Id:

The id attribute is useful to access value from required controls.

Title :

The title attribute is useful to show the user needed error messages

Conclusion:

JQuery validation is a good alternate for simple JavaScript form client side validation technique. And it’s easy to customize as per the requirement.

Download the sample code and all the files used in this example:   formValidator.zip

For demo please check the link  http://www.position-relative.net/creation/formValidator/