In this post, we study about the jquery validation woth custom messages.First, we understand, why validation is required and how it is usefull. If any user enter the form detaiols, it is possible that any user can write mitchmatch data. If any mitchmatch type data insert into db, it generate error messages to be display. It is very dangous for web design side.So, it is handle on the backednd side languages.

Whenever user submit form it is validate each and every time. So, it busy to backed server. If we use client side filtering of data, it's backed side is easy to handle and server load is less. So, we used client side jquery validation of data.

First we needs to make html form with css class. There are also reuired autocomplete="off" means if validation gives an error then not allowed to further process. There are define name of each input type.Based on the input type, we can get access the validate message or not.

  <form action="#" method="post" id="mailer" autocomplete="off">
            <label>
                <span class="text-label">Name: </span>
                <input type="text" class="input-text" name="name" required="required" value="" />
            </label><br /><br />
            <label>
                <span class="text-label">Email: </span>
                <input type="email" class="input-text" name="email_address"  value="" />
            </label><br /><br />
            <label>
                <span class="text-label">Description: </span>
                <textarea name="request" class="input-area"  required="required"></textarea>
            </label><br /><br />
			<input type="button" id="submit" value="submit">
        </form>

 The css code are given below:

.text-label
{
	text-align:right-side;
	text-decoration:bold;
	font-size:14px;
}
.input-text
{
 width:300px;
 margin-left:50px;
 height:20px;
 
}
.input-area
{
height:200px;
 
 width:500px;
 margin-left:50px;
}
.error
{
	color:red;
	margin-left:10px;
}

The jquery validation codes are available given below:

$( document ).ready(function() {
$('#submit').click(function() {
    $('#mailer').submit();
    return false;
});
//================================= VALIDAZIONE FORM
$('#mailer').validate({
    focusInvalid: false,
    debug: true,
    rules: {
        name: {
            required: true
        },
        email_address: {
            required: true,
            email: true
        },
        request: {
            required: true
        }
    },
    messages: {
        name: {
            required: 'name required'
        },
        email_address: {
            required: 'email required',
            email: 'email address is not valid'
        },
        request: {
            required: 'request required'
        }
    }
});
});

The Demo of the ouputs are given below: