Can't get form to submit after successful AJAX validation with PHP and Prototype - ajax

Question

I have forms on a site that are processed by PHP, including validation. Normally, if there's errors, the user is returned to the form with the appropriate error messages. For users with javascript enabled, I'm trying to write a javascript with Prototype that uses AJAX to do the same PHP validation (to avoid code duplication) and display the error messages without having to actually submit the form and wait for it to reload.
The script works very well at grabbing the errors via AJAX and displaying them. But, when there are no errors, I cannot get the form to submit and move forward to the next page. I've been working with Event.stopObserving, but it just reloads the page (which is not the form action url, the form submits to a different page than the form itself, so it's not the server sending the browser back). I'm not that good with javascript and Prototype, so I'm probably missing something obvious, but any help would be greatly appreciated. Anyway, here is my code:
document.observe("dom:loaded", function() {
$$('form')[0].observe('submit', validate);
function validate(event) {
event.stop();
// remove any existing error messages
var curErrors = $$('ul.error');
for( i=0, im=curErrors.length; i<im; i++ ) curErrors[i].remove();
$$('form')[0].request({
parameters: { 'js' : 1 },
requestHeaders: {Accept: 'application/json'},
onSuccess: function(req) {
var errors = req.responseText;
if( errors == '[]' ) {
// no errors, submit form to server
$$('form')[0].stopObserving('submit', validate);
$$('form')[0].submit();
} else {
// have errors, display error messages
var errors = errors.evalJSON(true);
for( var error in errors ) {
var errorMsg = '<ul class="error"><li>' + errors[error] + '</li></ul>';
var input = $$('[name="'+error+'"]')[0];
// display error message next to form field
. . .
}
}
},
onFailure: function() {
// can't validate here, let server do it
$$('form')[0].stopObserving('submit', validate);
$$('form')[0].submit();
}
});
}
});

Answer 1

Don't call event.stop() immediately within your validate method - the event handler will occur before the event does, meaning that the validate method will run before the form is submitted. Simply move that line within the branch of the if statement regarding validation failure, and it ought to work just fine.
http://www.prototypejs.org/api/event/stop