Question

I am using MVC3 and unobstrusive validation. On certain occasions I want to submit a form even if the form is incomplete providing two fields are selected. The JavaScript I am using is as follows:

$('#form_section11').submit(function () {
        //event.preventDefault(); //stops form from submitting immediately 

        var validatorSection11 = $('#form_section11').validate();

        if (!$(this).valid()) {
            // or family name and date of birth
            var FamilyNameExists = true;
            var DateOfBirthExists = true;                

            if (validatorSection11.errorMap["FamilyName"]) { FamilyNameExists = false; }
            if (validatorSection11.errorMap["DateOfBirth"]) { DateOfBirthExists = false; }                

            // show the partial save rules
            $('#ParitalSaveIntructions').show();
            // show the partial save checkbox
            if (FamilyNameExists && DateOfBirthExists) {

                $("#AgreePartialSave").show();

                if ($("#PartialSave").is(':checked')) {
                    //  partial save has been requested
                    return true;    //// <- save not happening, INCORRECT action
                }
                // clear perinatalWomanView_PartialSave
                $("#PartialSave").removeAttr('checked');
            }
            return false;   // <- save not happening, correct action
        } 
        return true;    // <- save happens, correct action
    });

The user is presented with a checkbox to confirm incomplete submission. I’ve indicated where the JavaScript works and where it fails.

I’ve also added

var validatorSection11 = $('#form_section11').validate(
            {
                onsubmit: false
            }
        );

This has no effect. My questions are:

Why is the original return true not functioning?
Am I using the onsubmit: false correctly?
Is there a better way of doing this?

Thanks in advance.

Answer 1

Try using a variable (save) instead of multiple return statements:

$('#form_section11').submit(function (e) {
    'use strict';
    var self = $(this),
        save = false,
        FamilyNameExists = true,
        DateOfBirthExists = true,
        validatorSection11 = self.validate();
    if (!self.valid()) {
        // or family name and date of birth
        FamilyNameExists = true;
        DateOfBirthExists = true;
        if (validatorSection11.errorMap["FamilyName"]) {
            FamilyNameExists = false;
        }
        if (validatorSection11.errorMap["DateOfBirth"]) {
            DateOfBirthExists = false;
        }
        // show the partial save rules
        $('#ParitalSaveIntructions').show(); // should this be "Parital" or "Partial"
        // show the partial save checkbox
        if (FamilyNameExists && DateOfBirthExists) {
            $("#AgreePartialSave").show();
            //if ($("#PartialSave").is(':checked')) { // Comment in answer
            //    // partial save has been requested
            //    save = true;
            //}
            save = $("#PartialSave").is(':checked');
            // clear perinatalWomanView_PartialSave
            $("#PartialSave").removeAttr('checked');
        }
        //save = false; //This was overriding the `save = true` above.
    }
    if (!save) {
        e.preventDefault(); // stops form from submitting immediately 
    }
    return save;
});

Also, at the section “Comment in answer”, this section will likely only execute after the form has been resubmitted because the following would have to happen:

1. $("#AgreePartialSave").show(); has to execute and show the section.
2. The user has to put a check in $("#PartialSave") for $("#PartialSave").is(':checked') to return true.
3. The $('#form_section11').submit() has to fire again for that section of the handler to evaluate.

If there is a different button that the user has to click to do a partial save, you’ll likely want to move that whole section into that button handler.