====== Basic Form Validation with jQuery ======
The main ''foxycart_includes.js'' file that you're likely using includes a copy of [[http://www.jquery.com|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.

===== Validating a Select Box =====
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:
<code html>
<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>
</code>
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:
  - Check the value of the select box,
  - If the value is //not// empty, we'll return ''true'',
  - Otherwise we'll alert the user and return ''false''.
That looks like this:
<code javascript>
<script type="text/javascript" charset="utf-8">
	function fc_PreProcess() { // First let's define the function
		if ($('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>
</code>
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.

**NOTE:** If you're using FoxyCart pre-v051 you'll need to [[..:downgrading|read the backwards compatibility notes]].

=== Validating a Form when multiple forms are present ===
If you need to validate a form but there are multiple "add to cart" forms on the same page, the above code won't work, as it will look for //any// and //all// ''select[name=size]'' elements on the page, not just the element within the form you're validating. To solve that, you'd need to add unique ''ID''s to all your forms, and use something like this (replacing the ''INPUT_NAME'' string with the name of the input to be validated):
<code javascript>
function fc_PreProcess(data, id) { // First let's define the function
	// alert(data); // Uncomment this line if you'd like to debug
	
	// If the link or form doesn't have an ID, let it through.
	// You could change this to return false if you wanted.
	if (!id) {
		return true;
	}
	
	// If the cart add request came from a link, don't bother validating it.
	if ($('#'+id)[0].tagName.toLowerCase() != 'form') {
		// alert($('#'+id)[0].tagName); // Uncomment this line for debugging
		return true;
	}
	if ($('#' + id + ' select[name=INPUT_NAME]').val()) {
		// 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 enter a value for INPUT_NAME.');
		// Then return false:
		return false; // We return false, the cart is not displayed, and the product is not added.
	}
}
</code>

===== Validating a Text Input =====
Validating a text input with jQuery is nearly identical. Let's say you have an input like this:
<code html>
<input type="text" name="gift_message" value="" id="gift_message" />
</code>
You'd use some validation code like this:
<code javascript>
<script type="text/javascript" charset="utf-8">
	function fc_PreProcess() { // First let's define the function
		if ($('#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>
</code>
===== Combining Validation Functions =====
You can only have a single ''fc_PreProcess()'' function, even if you have multiple validation criteria. So it'd look something like this:
<code javascript>
<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 (!$('select[name=size]').val()) {
			errors ++; // This is shorthand for "add 1 to errors".
		}
		if (!$('#gift_message').val()) {
			errors ++;
		}
		if (errors > 0) {
			alert('Please complete all the required fields');
			return false;
		} else {
			return true;
		}
	}
</script>
</code>
**NOTE:** If you're using FoxyCart pre-v051 you'll need to [[..:downgrading|read the backwards compatibility notes]].

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 (!$('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.

===== Resources to Learning Javascript and jQuery =====
  * [[http://www.tizag.com/javascriptT/javascriptif.php|Tizag has great tutorials]].
  * [[http://www.w3schools.com/JS/js_if_else.asp|W3Schools has decent tutorials]] as well.
  * [[http://www.visualjquery.com|Visual jQuery]] is a very handy, quick reference for jQuery.
  * [[http://docs.jquery.com|jQuery's documentation]] is very good as well.