javascript - 表单不完整时提交jQuery验证表单

Question

我正在使用 MVC3 和不显眼的验证。在某些情况下，如果选择了两个字段，即使表单不完整，我也想提交表单。我使用的 JavaScript 如下：

$('#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
    });

用户会看到一个复选框以确认不完整的提交。我已经指出了 JavaScript 工作的地方和失败的地方。

我也加了

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

这没有效果。我的问题是：

为什么原版return true不能用？我使用onsubmit: false正确吗？有没有更好的方法来做到这一点？

提前致谢。

Answer 1

尝试使用变量 ( save) 而不是多个 return 语句：

$('#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;
});

此外，在“回答中的评论”部分，此部分可能仅在重新提交表单后执行，因为必须发生以下情况：

1. $("#AgreePartialSave").show();必须执行并显示该部分。
2. 用户必须签入$("#PartialSave")才能$("#PartialSave").is(':checked')返回true。
3. $('#form_section11').submit()必须再次触发处理程序的该部分以进行评估。

如果用户必须单击另一个按钮来进行部分保存，您可能希望将整个部分移动到该按钮处理程序中。