jquery validation engine ajax field validation failing

Question

I'm completely stuck with this one, and I'd love advice on either what I'm doing wrong or what more I can do to debug the problem.

I have jquery validate engine validating a form. For example the code to check if a screenname exists is as follows;

<input value="[% fields.screenname | html %]" placeholder="Screenname" 
                onclick="$('#screenname').validationEngine('showPrompt', 'For example: JohnDoe_68.', 'load')" 
                class="validate[required,custom[onlyLetterNumber],maxSize[41],ajax[ajaxNameCallPerlScreenname]]" 
                name="screenname" id="screenname" type="text" size= "41" maxlength="24" data-prompt-position="centerRight"/>

The call to validation engine is

jQuery(document).ready(function(){
jQuery("#register").validationEngine('attach', 'autoHidePrompt', {
    promptPosition : "topRight", 
    scroll: "false",
    ajaxFormValidation : "true",
    onBeforeAjaxFormValidation: "beforeCall",
    onAjaxFormComplete: "ajaxValidationCallback"
    });
});

At this stage the beforeCall and ajaxValidationCallback functions are straight from the demo and never get called anyway so I won't include them here.

On the server side I have a simple script checking to see if that username is taken and returning json (utf8 encoded) via a script written in perl. The relevant code is;

use utf8;
my $output;
eval { $output = JSON::XS->new->utf8->encode( $data ); };
if($@)
{
    use Carp;
    confess($@);
}
warn "Form Output is " . $output;
$self->discard_request_body();
$self->req->content_type('application/json; charset=utf-8');
$self->req->headers_out->set( 'Expires' => 'Thu, 1 Jan 1970 00:00:00 GMT' );

$self->req->headers_out->set( 'Content-Length' => length $output );
$self->req->print($output);

And this is where the trouble starts. In chrome and firefox I can see the validation request hit the server, I can see the correct response get sent back to the browser, I can look at the response in the browser which is correct (I think) and like this

[["screenname","false","That user name is already taken. Please try again."]]

however the actual onAjaxFormComplete is never called. If I set breakpoints in beforeCall and ajaxValidationCallback functions they are never called.

Headers are as follows;

Response Headers
Connection  Keep-Alive
Content-Encoding    gzip
Content-Length  89
Content-Type    application/json; charset=utf-8
Date    Sat, 19 May 2012 19:47:28 GMT
Expires Thu, 1 Jan 1970 00:00:00 GMT
Keep-Alive  timeout=15, max=100
Server  Apache/2.2.16 (Debian)
Vary    User-Agent,Accept-Encoding
X-UA-Compatible chrome=1
X-What-Alias    flooting
Request Headers
Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Connection  keep-alive
Cookie  flooting_session=be8aec0e39f12ee031c9103072b19a66
Host    six.flooting.com
Referer http://six.flooting.com/register
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0) Gecko/20100101      Firefox/12.0
X-Requested-With    XMLHttpRequest

So that's about all I can tell you at the moment. I think I'm missing something very simple in the way I'm configuring the callback functions, but I've been banging my head against this for some time and I'm not any closer to an answer.

Note beforeCall is not called prior to the ajax request, however I've set breakpoints in validationEngine at the appropriate section of code (where beforeCall should be called), and execution never reaches it. Doesn't even make it to the parent function.

Anyone see what I'm missing?

Answer 1

I've found the answer, In the documentation for validation engine it says you must return an array of arrays for form validation and an array for field validation. I was returning an array of arrays when I should have been returning an array.