jquery validations

We are using jquery validations engine which is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.
 
Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.
 
We have downloaded the plugin from jquery official website found at :
jQuery Validation plugin
In all of these folders we need 5 files which are listed as :

1) jquery-1.8.2.min.js for main jquery file
2) jquery.validationEngine-en.js for displaying messages and custom rules
3) jquery.validationEngine.js Form validation engine allowing custom regex rules to be added
4) template.css for primarily managing page layout
5) validationEngine.jquery.css for styling error messages
6) index.html the main HTML page

now consider the following actions :

Example : (index.html or any other web page on which form is to be designed)

<!DOCTYPE html>
<html>
<head>
<title>JQuery Validations</title>
<!-- including styles -->
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css">
<link rel="stylesheet" href="template.css" type="text/css">

<!-- including required javascript files -->
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

<script>
	jQuery(document).ready(function() {
		// binds form submission and fields to the validation engine
		jQuery("#formID1").validationEngine('attach', {
			promptPosition : "centerRight",
			autoPositionUpdate : true
		});
		jQuery("#formID2").validationEngine('attach', {
			promptPosition : "topLeft",
			autoPositionUpdate : true
		});
		jQuery("#formID3").validationEngine('attach', {
			promptPosition : "bottomRight",
			autoPositionUpdate : true
		});
		jQuery("#formID4").validationEngine('attach', {
			promptPosition : "topLeft"
		});
	});
</script>
</head>
<body>
	<form id="formID1" class="formular" method="post" action="abc.php" style="width:400px;">
		<table width="100%" style="background-color:#E6E6E6">
			<tr>
				<td> Name</td>
				<td>
				<input class="validate[required] text-input" type="text" name="name1" id="name1">
				</td>
			</tr>
			<tr>
				<td> Phone</td>
				<td>
				<input class="validate[required] text-input" type="text" name="name2" id="name2" />
				</td>
			</tr>
			<tr>
				<td> email</td>
				<td>
				<input class="validate[required,custom[phone]] text-input" type="text" name="name3" id="name3" />
				</td>
			</tr>
			<tr>
				<td> website</td>
				<td>
				<input class="validate[required,custom[email]] text-input" type="text" name="name4" id="name4" />
				</td>
			</tr>
			<tr>
				<td>&nbsp; </td>
				<td><input type="submit" value="Submit" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

Output on invalidation :


Now if you want to add another form element and try to validate form, you have to do 2 simple things as mentioned on lines (33-39) and then second lines (74-82) as :

<!DOCTYPE html>
<html>
<head>
<title>JQuery Validations</title>
<!-- including styles -->
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css">
<link rel="stylesheet" href="template.css" type="text/css">

<!-- including required javascript files -->
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

<script>
	jQuery(document).ready(function() {
		// binds form submission and fields to the validation engine
		jQuery("#formID1").validationEngine('attach', {
			promptPosition : "centerRight",
			autoPositionUpdate : true
		});
		jQuery("#formID2").validationEngine('attach', {
			promptPosition : "topLeft",
			autoPositionUpdate : true
		});
		jQuery("#formID3").validationEngine('attach', {
			promptPosition : "bottomRight",
			autoPositionUpdate : true
		});
		jQuery("#formID4").validationEngine('attach', {
			promptPosition : "topLeft"
		});
		
		// adding new field validation

		jQuery("#formID5").validationEngine('attach', {
			promptPosition : "topLeft"
		});
		
		// finished new validation 

	});
</script>
</head>
<body>
	<form id="formID1" class="formular" method="post" action="abc.php" style="width:400px;">
		<table width="100%" style="background-color:#E6E6E6">
			<tr>
				<td> Name</td>
				<td>
				<input class="validate[required] text-input" type="text" name="name1" id="name1">
				</td>
			</tr>
			<tr>
				<td> Phone</td>
				<td>
				<input class="validate[required,custom[phone]] text-input" type="text" name="name2" id="name2" />
				</td>
			</tr>
			<tr>
				<td> email</td>
				<td>
				<input class="validate[required,custom[email]] text-input" type="text" name="name3" id="name3" />
				</td>
			</tr>
			<tr>
				<td> website</td>
				<td>
				<input class="validate[required] text-input" type="text" name="name4" id="name4" />
				</td>
			</tr>

			</tr>
            
            <!-- Starting adding new element -->
			<tr>
				<td>sex </td>
				<td>
                <input class="validate[required] text-input" type="text" name="name5" id="name6" />
                </td>
			</tr>

            <!-- Ending adding new element -->
                        
			<tr>
				<td>&nbsp; </td>
				<td><input type="submit" value="Validate" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

Output :