AJAX Validation of ExpressionEngine SAEF (Safecracker etc.)

I've been experimenting with AJAX validation and ExpressionEngine recently and have found that EE would only need one extra hook in order to unlock AJAX validation.

***

EDIT: Rob Sanchez, father of Safecracker, has pointed out that Safecracker has a built in parameter to return JSON validation data. Clearly he's several steps ahead of me! ;-) You might still find this post useful reference though.

***

I'm hoping EllisLab may at some point include this hook to the core version of EE, but until then, you could always put in this hack yourself. No liability accepted on my part though! That said, it's only one line of code.

The hook

Find this file: system/expressionengine/core/EE_Output.php. Then in the show_user_error method (approx. line 326), add this new hook right after $EE =& get_instance();

// < --- START MOD 
// By Oskar Smith, http://www.oskarsmith.com
// Additional hook to allow processing of user error page
$EE->extensions->call('show_user_error_start', $type, $errors, $heading);		
//  END MOD  --->

The function should now start like this:

function show_user_error($type = 'submission', $errors, $heading = '')
{
	$EE =& get_instance();
		
	// < --- START MOD 
	// By Oskar Smith, http://www.oskarsmith.com
	// Additional hook to allow processing of user error page
	$EE->extensions->call('show_user_error_start', $type, $errors, $heading);		
	//  END MOD  --->
		
	if ($type != 'off')
	{

You now have a new hook to use in your extensions, which in my case I've used to hijack the user error page and give a JSON version.

The extension

In order to actually use this hook, create an extension with two methods; one that uses the new hook above, show_user_error_start, and one that uses entry_submission_redirect.

The show_user_error_start method will trigger:

/*
* Hijack user error page and output errors as JSON. Booyah!
*/
function ajax_user_error($type, $errors, $heading) {
	if ($this->EE->input->post('trigger_ajax')) {
		$return = array();
		$return['error'] = true;
		$return['errors_array'] = $errors;
		exit(json_encode($return));
	}
}
// --------------------------------------------------------------------

While the entry_submission_redirect hook will trigger:

/*
* If ajax trigger is enabled, sends ajax success response.
*/
function post_entry_submission_handler($entry_id) {
	if ($this->EE->input->post('trigger_ajax')) {
 		exit(json_encode(array('success'=>1, 'entry_id'=>$entry_id))));	
 	}
}
// --------------------------------------------------------------------

The Form

You'll notice that in both cases above, the method only executes if a post value has been sent for trigger_ajax. This means we can selectively use these hooks in our Safecracker forms simply by including a hidden field named trigger_ajax. So implement your Safecracker form exactly as you would normally, but add this hidden field, plus a submit button that you're going to attach a jQuery click event to.

You can now hijack the form with jQuery, serialize the data and post it via AJAX.

/*
* AJAX Posting and validation
*/
$(".btn_submit").click(
	function() {
		
		$.post('your_page_url_here', $('#your_safecracker_form_id').serialize() ,
			function(data){
				
				if (data.error) {
				    // process your errors here
                                     alert('error');
				}
				else {
                                   // process your successful post here (i.e. redirect etc.)
				   alert('success');
				}
				
				   		
		}, "json");
		return false;
	}
);
// --------------------------------------------------------------------

That should get your Safecracker forms validating via AJAX. Not bad for only one hack to the EE Core, and the best thing is this method means you can still set all your fields' validation properties in the EE CP.

This might not work for everybody by the way, and I've posted it for a proof of concept as much as anything.

AJAX Validation of ExpressionEngine SAEF (Safecracker etc.)