Question

I am using MVC 3 and razor in Visual Studio 10 with client side unobtrusive validation. I have a requirement to offer the user an opportunity to save a form fs some of the required fields are missing. The submit is with an Ajax.bgein form structure.

I have the following JavaScript to catch the submit event.

$(document).ready(function () {

$('#submit-11').click(function (event) {

    var validator = $("#form0").validate();

    if (!$("#form0").valid()) {
        // for partial save needs either ID number
        // or family name and date of birth
        var NameExists = true;
        var DateOfBirthExists = true;
        var IDNumberExists = true;

        if (validator.errorMap["model.FamilyName"]) { NameExists = false; }
        if (validator.errorMap["model.DateOfBirth"]) { DateOfBirthExists = false; }
        if (validator.errorMap["model.IDNumber"]) { IDNumberExists = false; }

        if (IDNumberExists || (NameExists && DateOfBirthExists)) {
            if ($("#model_PartialSave").attr('checked')) {
                //  partial save has been requested
                alert("saving");
                return true;    // AJAX save is NOT triggered
            }
            $("#AgreePartialSave").show();
            $("#model_PartialSave").removeAttr('checked');

        }
        return false;
    }
    return true;    // AJAX save IS triggered
});

});                    //document ready end

The logic seems to be correct – I have traced this in firebug – and the alert is triggered but the AJAX submit call does not happen. If the form is valid the AJAX submit call happens.

I have also tried event.preventDefault(); but that prevents any save happening.

I have also traced this in firebug and all the correct calls seem to be being made.

Any help gratefully received.

UPDATE

It seems that this might be a limitation in the Microsoft Ajax library. See this link for the details and a work around.

Answer 1

I believe what you need to intercept is the form’s submit event, not the submit button’s click event. What’s happening (I suspect) is that, since the validation framework still considers your form to be invalid, it’s not submitting it, even though you’re letting the click event go through with your return true.

There’s an example here of running javascript after validation has completed but before the actual post.

$(function() { 
    $('#form0').submit(function() { 
        if (!$(this).valid()) { 
            // do your thing
            return true; 
        } 
    }); 
 }); 

ETA: having read your reply, I wonder whether the problem isn’t that the validation framework considers your page invalid, and you’re attempting to override its conclusion and submit anyway. In that case, the code I provided would never execute because the submission would never happen.

I would suggest trying this: remove the Required attributes from the properties in the model that correspond to the 3 input fields, and move your checking logic into the submit function, as I suggested. But rather than saying, if(!$(this).valid()), you would only execute the code if the form was otherwise valid.