Can't Submit Form With Simple Validation with the JQuery Form Plugin

Question

I am using the jQuery Form plugin to submit AJAX requests. I am trying to do some simple validation (make sure fields are filled out) before submitting. I am not trying to run any AJAX validation prior to submission. Before I added beforeSubmit to the options of the ajaxform() method, the form would submit and my controller code would run fine. Once I added the beforeSubmit option with a validation function name, the form will not submit whether I return false, true, or nothing from the validate method. Here is my initial code that sets up the form:

$(document).ready(function() {
var options = {
    beforeSubmit: function(data, form, options) { return validate(data, form, options); },
    url: '/PromoManagement/Images/AddImages?partial=true',
    success: updateImageList
};

    $('#frmAddImages').ajaxForm(options);
});

and here is my validation function:

function validate(data, form, options) {
    var returnMessage = new Array();

    $('#txtImagePath,#txtImageCaption').removeClass('validationError-input');
    clearValidation();

    if ($('#txtImagePath').val().length == 0) {
        returnMessage.push('<li>Image Path is required</li>');
        $('#txtImagePath').addClass('validationError-input');
    }
    else { 
        if (!parseFileExtension($('#txtImagePath').val())) {
            returnMessage.push('<li>Please provide an image with an extension of .jpg, .gif, or .png</li>');
            $('#txtImagePath').addClass('validationError-input');    
        }    
    }

    if (returnMessage.length > 0) {
        $('.errorList').show();
    }

    if (returnMessage.length != 0) {
        buildValidationList(returnMessage);
        return false;
    }
    else {
        return true;
    }

}

I have tried returning nothing if no errors are encountered, but I get the same results. I am able to break into the validation code and see what is being returned from the function, and that is always as expected. Am I missing something here?

Answer 1

I think that beforeSubmit is not passing the form to the validate function. Try wrapping validate in an anonymous function and supplying the correct form parameter.

EDIT Looks like the beforeSubmit function takes three arguments (API), the second of which is the form. I've updated my example to reflect this. After looking at your code, it appears that you don't use it anyway -- so this has been updated as well. I'm not sure exactly what is going on as it appears that it should be working. Have you confirmed that you don't get any javascript errors in your validation function?

beforeSubmit: function(data,form,options) {
    return validate();
}