使用回调恢复默认行为

Question

在提交表单之前，需要在 Javascript 中进行一些检查。这些检查将在继续之前验证是否为该特定部分捕获了所有适用数据（如果按钮选择为是并且没有提交任何索赔，以及客户是否提交了重复的索赔）。

检查重复声明的部分返回从 Ajax 函数返回的数据数组。如果有任何数据，则必须阻止表单继续并显示一个弹出窗口 - 这是有效的。我卡住的部分是当没有数据时（count = 0），我需要触发一个按钮并且表单必须继续（调用 MVC 的 Post 方法）。但是，表单不会继续 Post 事件（以默认行为恢复）。

这就是我所做的：

    $("#btnNext").on("click", function (e) {
    isNextClick = true;
    if ($("input[name='Claims']:checked").val() === "Yes" && claimCount === 0 && !isClaimFilled()) {
        $('#btnAddClaim').trigger("click");
        return false;
    } else if ($("input[name='Claims']:checked").val() === "Yes" && isClaimFilled()) {
        $("#dialog-claim-error").modal("show");
        return false;
    } else {
        //Lets first check for duplicates
        e.preventDefault();

        var result = clientClaimDuplicationCheck(function (isContinue) {
            var claimCount = isContinue.length;

            if (claimCount === undefined || claimCount.length == 0) {
                // array empty or does not exist when callback is done. 0 will be passed to resume default behaviour
                claimCount = isContinue;
            }

            if (claimCount != undefined || claimCount != null) {
                if (claimCount > 0) {

                    $.each(isContinue, function (index, item) {
                        addClaimDuplicateList(claimIndex, item.Desc, item.Year, item.Month);
                    });
                    e.preventDefault();
                    $("#claimDuplicateList").show();
                    $("#dialog-nav-driver-duplicateClaims").modal("show");
                }
                else {
                    // Prevent infinite loop
                    $(this).unbind("click");
                    
                    //Now submit form, all validation passed - resume default behavior
                    //  $("#btnNextValidated").submit();
                    $('#btnNextValidated').trigger("click");
                }
            }
        });
    }
});

$("#btnNextValidated").on("click", function (e) {
    $('#ClaimYear').removeClass("input-validation-error");
    var span = $("div").find("[data-valmsg-for='ClaimYear']");
    span.removeClass("field-validation-error").text("");

    setTimeout(ss.isValidPage, 100);
    return true;
});

function clientClaimDuplicationCheck(callback) {
   // var isContinue;
    //post data to the server
    $.ajax({
        url: "/Service/ClientClaimDuplicationCheck",
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            callback(data);
        },
        error: function (a, b, c) {
            var error = a;
        }
    });
 }

     function addClaimDuplicateList(id, name, year, month) {
    $('#showClaimDuplicateList').append('<div id="claimDuplicateItem' + id + '" data-claim-key="0" class="control-label label-heading-3 label-input-claimSubTitle">' +
        '<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><ul class="claimUl"><li>' + name + ' ' + month + '/' + year + '</li></ul></div>' +
        '</div>');
}

恢复行为时需要调用的方法：

    [HttpPost]
    public ActionResult DriverInformation(DriverInformationViewModel model)
    { //some methods}

有没有办法恢复默认行为并调用按钮的 Post 方法？

Answer 1

在以下代码行中，您将再次触发对按钮的单击，以便将表单实际提交到后端。

//Now submit form, all validation passed - resume default behavior
//  $("#btnNextValidated").submit();
$('#btnNextValidated').trigger("click");

你应该知道的是，表单提交按钮总是在表单内部，并且按钮点击事件最终会触发表单提交事件，然后将表单数据发布到表单 URL。

基本上在验证发生后，您不必再次触发按钮上的点击事件，您只需在表单本身上触发提交事件即可。

$("#formId").submit();