README

Inline Validation for Symphony
------------------------------
@version	1.0
@release	10th September 2009
@jquery		1.3.2

Allows you attach inline Ajax validation to your forms.

The validation appears on inputs and textareas after the user
has filled them out (why validate on nothing..). The error
messages returned are exactly the same ones as Symphony. The field
names are aliased to whatever the label is of that validation
element.

Setup
------------------------------

1.	Create a page in Symphony and add all events that you want
	validation to appear on.
	
2.	Ensure the page type is set to XML (otherwise this will fail in IE)

Usage
------------------------------

$('form').SymphonyInlineValidation({
	url: "http://path/to/your/validation/page"
});

There's a few configuration options:

	url (required), (string)
		The path to your validation page
	
	validate (string)
	 	A string expression of what fields you want to be validated, defaults to:	
			".label:contains('*') + input:not(:hidden),.label:contains('*') + textarea:not(:hidden)"
			
	canofspam (bool)
		Whether your form uses the canofspam extension (http://github.com/rowan-lewis/canofspam/tree/master)
		
Caveats
------------------------------
Test with a form structure like this:

	<form>
		<div class='field'>
			<label for='name'>Name <em>*</em></label>
			<input type='text' name='fields[name]' />
		</div>
		<div class='information />
		<div class='field'>
			<label for='name'>Email <em>*</em></label>
			<input type='text' name='fields[email]' />
		</div>
		<div class='information />
		<div class='buttons'>
			<input type='hidden' value='whatever' name='canofspam' />
			<button name='action[make-contact]' type='submit'>Submit</button>
		</div>
	</form>
	
On error the div.information for the preceding element is filled with:

	<div class='error'>
		<p>Error message</p>
	</div>
	
If yours differs, line 53, 66 and 68 will need to be adjust. I haven't figured out how to make these
extensionable.

jquery.symphony.inlineValidation.js

(function($) {
	$.fn.SymphonyInlineValidation = function(o) {
		o = $.extend({

			validate: ".label:contains('*') + input:not(:hidden),.label:contains('*') + textarea:not(:hidden) ",
			canofspam: false,
			url: null

		}, o || {});

		return this.each(function() {
			if(o.url == null) return false;

			var self = $(this);

			/*	Only validate fields that are required, using the form builder is defined as the label containing a * */
			var fields = $('input, textarea', self).filter(o.validate);

			/*	Show message only after user has passed over the field and stuffed up */
			fields.blur(function() {
				var field = $(this);

				/*	Just send this field, otherwise if all the fields are correct an entry would
				**	be made in Symphony */
				var post = field.serializeArray();

				/*	Without canofspam, the request fails without any detailed field information. */
				if(o.canofspam) {
					var can = [{name: "canofspam", value: $('input[name=canofspam]').val()}];

					post = jQuery.merge(post,can);
				}

				/*	Without the submit action, the validation page doesn't know what event to process */
				var action = [
						{name: self.find('[name^=action]').attr("name")}
					];

				var send = jQuery.merge(post,action);

				$.post(o.url, send,
					function(data) {
						doInlineValidation(data)
					}, "xml"
				);

				function doInlineValidation(data) {
					/*	Needs fields[{name}] syntax for Symphony, but for the validation, we just want the
					**	{name}, so replace the fields[ and slice off the end ] (could be done better) */
					var name = field.attr('name').replace(/fields\[/, "").slice(0,-1);
					var invalid = $(data).find(name + "[message]");

					var target = field.parent().next('.information');

					/*	If there's a message for this field, it will always be bad,
					**	show it to the user */
					if(invalid.length == 1 ) {
						/*	Allows you to alias form fields are the field's label */
						var label = $('label',field.parent()).text();
						/*	Again, my RegExp fu is low, this could be better */
						var reg = new RegExp(name, "i");

						var msg = invalid.attr("message").replace(reg, label).replace(/\*/,"");

						if(target.find('.error').length == 0) {
							target.append("<div class='error'><p>" + msg + "</p></div>").slideDown("fast");
						} else if(target.find('.error').text() != msg) {
							target.find('.error').html("<p>" + msg + "</p>").slideDown("fast");
						}

					} else {
						target.find('.error').slideUp("fast", function() {
							$(this).empty();
						});
					}
				}
			});
		});
	};
})(jQuery);

validation.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >

	<xsl:output method="xml" />
	
	<xsl:template match="events">
		<xsl:copy-of select='.' />
	</xsl:template>
	
</xsl:stylesheet>