Basic Form Validation with jQuery

The main foxycart_includes.js file that you're likely using includes a copy of jQuery, a very flexible javascript framework. Using jQuery you can validate your own add-to-cart forms quickly and easily. Here are some examples. These are not meant to be exhaustive, but will help get you on your way to learning javascript and jQuery. Also worth noting is that we've avoided most shorthand here in an effort to make things a bit more clear. As you progress with javascript you'll be able to consolidate some of this code.

Note: In version 0.4.0, fc_PreProcess(data) now expects and input variable which is a serialized data string of either the form values or the querystring values added to an add to cart link. This variable can make data validation much easier as you now have full access to all the data sent to FoxyCart.

Let's say you're selling T-Shirts and you have a select box to determine the size before the shirt is added to the cart. Your default selected option says “Select Size”, with an empty value, like this:

<select name="size" size="1">
	<option value="" selected="selected">Select Size</option>
	<option value="Small">Small</option>
	<option value="Medium">Medium</option>
	<option value="Large">Large</option>
	<option value="XLarge">XLarge</option>
</select>

The goal is to make sure a customer cannot add a shirt to their cart without first selecting a size. There are just a few things you need to do.

First, let's understand the fc_PreProcess() function. It doesn't exist by default, but if you create it, FoxyCart will run it prior to adding an item to the cart. If fc_PreProcess() returns true, it will add as expected. If fc_PreProcess() returns false, the cart will not display and the item will not be added to your cart.

In order to make this happen we'll define the fc_PreProcess() function, and insert a quick if/then/else statement. What we'll be doing is:

1. Check the value of the select box,
2. If the value is not empty, we'll return true,
3. Otherwise we'll alert the user and return false.

That looks like this:

<script type="text/javascript" charset="utf-8">
	function fc_PreProcess() { // First let's define the function
		if ($j('select[@name=size]').val()) { // Now a simple "if" statement
			// The .val() returns the value of the chosen element
			// Since we don't have a condition, it's basically saying "if the value exists"
			return true; // So if the value of the select box isn't null, we'll return true and add the item to the cart
		} else { // Otherwise...
			// Let's alert the user to the error:
			alert('Please select a size. We want to make sure you get exactly what you want.');
			// Then return false:
			return false; // We return false, the cart is not displayed, and the product is not added.
		}
	}
</script>

Insert that code anywhere beneath your foxycart_includes.js call. Since it uses jQuery, which is loaded in foxycart_includes.js, it has to be called afterwards.

Validating a text input with jQuery is nearly identical. Let's say you have an input like this:

<input type="text" name="gift_message" value="" id="gift_message" />

You'd use some validation code like this:

<script type="text/javascript" charset="utf-8">
	function fc_PreProcess() { // First let's define the function
		if ($j('#gift_message').val() != '') {
			// The .val() returns the value of the chosen element
			// Our condition is !=, which means "not equal to"
			return true; // So if the value of the text input isn't blank, we'll return true and add the item to the cart
		} else { // Otherwise...
			// Let's alert the user to the error:
			alert('Please enter a gift message.');
			// Then return false:
			return false; // We return false, the cart is not displayed, and the product is not added.
		}
	}
</script>

You can only have a single fc_PreProcess() function, even if you have multiple validation criteria. So it'd look something like this:

<script type="text/javascript" charset="utf-8">
	function fc_PreProcess() {
		var errors = 0; // Let's set a variable called 'errors', and set the value to 0.
		if (!$j('select[@name=size]').val()) {
			errors ++; // This is shorthand for "add 1 to errors".
		}
		if (!$j('#gift_message').val()) {
			errors ++;
		}
		if (errors > 0) {
			alert('Please complete all the required fields');
			return false;
		} else {
			return true;
		}
	}
</script>

In this case we used a simple error counter. If there were any errors, it'd alert and return false. You can extend this to show/hide error labels/divs, or etc.

The exclamation point means “does not”, so when we say if (!$j('select[@name=size]').val()), we're saying “if the value of the select element does not”. This is basically a shorthand way of saying “does not equal anything”, or “is false”. If it equalled anything, it'd be true; if it's empty it's false. The exclamation makes it a double negative, so “if the value is not true”. Confusing? Check the links to the tutorials below.

• Tizag has great tutorials.
• W3Schools has decent tutorials as well.
• Visual jQuery is a very handy, quick reference for jQuery.
• jQuery's documentation is very good as well.