In this next tutorial, I will demonstrate how to perform input validation on AJAX forms using the jQuery form plugin.

The requirements for this tutorial are:

and the required files for this tutorial are:

Before we start with this tutorial, let me make one thing clear:

Client-side input validation is no substitute for server-side validation.
Client-side validation can be easily bypassed, and should be treated more as an enhancement for the form.

now let us continue with the tutorial
For this tutorial, I’m going to use a very simple product information form. here is how it would look like:

	<b>Enter Product Information:</b><br><br>
	<form id="prod_form" method="POST" action="process_product.php">
		Product Name* :<br>
		<input type="text" name="prod_name" id="prod_name">
		<span class="error" id="prod_name_error"></span><br>
		Quantity* :<br>
		<input type="text" name="prod_quantity" id="prod_quantity">
		<span class="error" id="prod_quantity_error"></span><br>
		Optional Description:<br>
		<textarea name="prod_description" cols="30" rows="3"></textarea>
		<br><br>

		<input type="submit" value='Submit'>
	</form>

In our form, the product name and the product quantity would be the required fields. Also the quantity should be a valid numeric integer. For now, we’ll give our for the id name prod_form. Also notice that a blank <span> for the error messages has already been defined for each required field? We’ll get to that later on

So how do we implement this server side validation in jQuery? With the jQuery Form Plugin, it is much easier to process the validations.

First of all, we must define the jQuery base, and the jQuery form plugin at the head of the document.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

now for the most important part, we must set a pre-submit callback function in the ajaxForm options. Here is how to do it:

$('#prod_form').ajaxForm({
					target: 		'#content',
					beforeSubmit: 	validateForm
			});

The target option basically states where the AJAX output will display, while the beforeSubmit option shall contain the function that will be processed before the form is submitted to the server.

In our form, we’ve set a function named validateForm to handle the validations. Here is what the validateForm looks like:

function validateForm()
{
	$("#prod_name_error").empty().hide();
	$("#prod_quantity_error").empty().hide();

	var product_name 		= $("#prod_name").val();
	var product_quantity	= $("#prod_quantity").val();

	var errors 				= 0;

	if (product_name == null || product_name == '')
	{
		$("#prod_name_error").show()
.append("Product Name is required");
		errors++;
	}
	if (product_quantity == null || product_quantity == '')
	{
		$("#prod_quantity_error").show()
.append("Product Quantity is required");
		errors++;
	}
	else if (!isNumeric(product_quantity))
	{
		$("#prod_quantity_error").show()
.append("Product Quantity should be numeric");
		errors++;
	}

	if (errors > 0)
	{
		alert ("Errors were found on the form");
		return false;
	}

}		

function isNumeric(form_value)
{
	if (form_value.match(/^\d+$/) == null)
		return false;
	else
		return true;
}

Here is where all the validation happens. The first couple of if-then blocks basically checks if a value has been entered for for the required fields: product_name and product_quantity. And the last if-then block checks whether product_quantity is a valid numeric integer through a regex function.

Also regarding the beforeSubmit callback function, if it returns FALSE, the form shall not be submitted.

Also, this code shows how to display the error message for each individual required field. What the validateForm function does is that it appends the error warning on the <span> we have defined earlier.

If you want to see this tutorial in action, just check on the links below

View Input Validation Demo
Download Source Code