Question

Here is what I’m trying to do,

Capture my form submission post it to my ajax processing for form validation (without a page reload obviously)

then if the ajax server side doesn’t return an array of errors (data in the code below) go ahead with the actual form submission. The ‘return false’ at the bottom of the snippet should prevent the jquery default behavior (which is to submit the form)

I’ve tried just return true if we don’t get any errors but that doesn’t work.

Any suggestions?

Here is what I got so far:

$('.submit').click(function(e) {
    $.ajax({
        type: "POST",
        url: "/processform_ajax",
        data: $(':input').serializeArray(),
        dataType: "json",
        success: function(data) {
            if (data != '') {
                $("#response span").html("");
                $('.highlightbox').removeClass('highlightbox');
            } else {
                $('#myform').submit();
            }
        },
        error: function(error, txt) {
            alert("Error: " + error.status);
        }
    });
    return false;
});

Answer 1

I handle this two different ways:

First, do front end validation with the wonderful Jquery Inline validation tool This step knocks out 95% of the problems before having to get tricky with PHP and Jquery.

Second, I submit my values from the form to the script. Let the PHP (in my case) do the “thinking” on validation. If it’s incorrect, I return that information in a json_encoded string for the success function. I build a case (if data.valid == true for example) then display error flags. Else, do success steps and notify the user in the UI.

I think the key in your case is to ensure that the data coming back is json_encoded. FYI, I’ve noticed some very random issues with json_encode sometimes causing issues with the data return function due to square brackets, which are entirely valid but sometimes cause non-erroring faults.

Good Luck.