jQuery infield label plugin is pretty simple to integrate and more power full for client side validation.Now these days its very important to validate a form on client side and server side for making your webpage more secure. The client side validation is make your webpage secure and more user friendly like before submitting the entire form the users will get details about the form fields without refresh the page; that will be a perfect validation.

The client side validation only help to basic security fix its not the complete fix for the validation you can use the basic idea of this jQuery infield label and elaborate the concept for complete form validation plugin. Here i just explain how we can use a simple form validation with jQuery infield label plugin.

We required only a jQuery library and basic html form. Make sure the html page head section include the following scripts and css (stylesheet page).

<link href="css/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="js/infieldlable.js" type="text/javascript"></script>

jQuery infield label plugin

Then your html should contain follows.The only thing you make sure is label for=”name” should match with input field id and the infield label text is the content of label.

<div class="main">
<form action="#" method="post" accept-charset="utf-8" name="form1" id="contact_form">
Demo For infield lable jQuery Form Validation
<p>
<label for="firstname">First Name:</label><br />
<input type="text" name="firstname" value="" id="firstname"/>
</p>
</form>
</div>

Then the initialization of jQuery infield label plugin. is pretty simple as follows.

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(e) {
jQuery("label").inFieldLabels();
});
</script>

This is most simple and compatible for all major browsers IE7 and above, Safari , Chrome, Firefox.

jQuery infield label plugin

Would you like to see a demo ? and want to download the script ? just click below links.

                                      Good Luck   🙂 🙂 🙂