表單驗證之前BlockUI不起作用

Question

我有一個使用struts2-jquery插件中的sj：submit標記提交的表單。 提交按鈕設置有validateFunction和onAfterValidationTopic。 當用戶通過sj：submit保存此表單時，我嘗試使用jquery BlockUI阻止該表單。 問題在於，直到驗證完成后，BlockUI才會打開。 由於這種形式相當廣泛，並且驗證需要一秒鍾，因此時間間隔對於用戶而言非常明顯。

通過添加到按鈕的onClick參數中的javascript方法來調用BlockUI。 我將fadeIn設置為0，因此它應該同步執行。

通過斷點，我確定在任何struts2-jquery驗證方法之前都將調用BlockUI，但是直到表單被驗證並且已提交或標記了驗證警告后，該塊才出現。

我的操作順序應該是通過onClick參數阻止UI，讓struts2-jquery插件提交表單以進行驗證，然后觸發我的AfterValidationTopic，如果驗證失敗，它將取消阻止UI。 所有這些步驟均以正確的順序進行，除了我看不到UI被阻止。 我不知道為什么會這樣。 我嘗試將jquery.struts2.js文件中的$ .blockUI調用添加到$ .elem.click函數中，結果相同。 BlockUI正在被調用，但是我沒有看到它。

這是我的JSP：

<sj:submit 
    button="true"
    type="button"
    id="save_button"
    cssClass="btn bg-cobalt-300"
    buttonIcon="icon-floppy-disk"
    label="Save"
    validate="true"
    formIds="my_form"
    onAfterValidationTopics="postValidation"
    validateFunction="bootstrapValidation"
    value="%{getText('global.save')}"
    onClick="loadingMaskSave();"
    />

和JS代碼：

function loadingMaskSave() {
    $.blockUI({
        fadeIn: 0
    });
}

$.subscribe('postValidation', function (event,data) {
    if(event.originalEvent.formvalidate == false) {
        $.unblockUI();
    }
});

Answer 1

我設法找出問題所在。 在jquery.struts2.js文件的validateForm方法中，正在通過ajax同步提交表單以進行驗證。 ajaxSubmit的async參數設置為false。 這將導致瀏覽器完全鎖定，直到完成驗證為止，這就是為什么不顯示BlockUI覆蓋的原因。 為了解決這個問題，我更新了formsubmit方法中的$ elem.click（）代碼。 現在，AjaxSubmit異步觸發（將async設置為true），並且驗證后主題的處理和表單的實際提交現在由AjaxSubmit的complete方法處理。 這可以防止瀏覽器被鎖定，並且現在我可以在驗證開始之前看到BlockUI覆蓋。

$elem.click( function(e) {
    var form = $(self.escId(o.formids)),
        orginal = {};
    orginal.formvalidate = true; 
    e.preventDefault();

    if (o.validate) {
        var submit = true,
            ajaxSubmitParams = {};

        if (!self.loadAtOnce) {
            self.require("js/plugins/jquery.form" + self.minSuffix + ".js");
        }

        ajaxSubmitParams.type = "POST";
        ajaxSubmitParams.data = {
                "struts.enableJSONValidation": true,
                "struts.validateOnly": true
        };
        if (o.href && o.href !== '#') {
            ajaxSubmitParams.url = o.href;
        }
        else {
            ajaxSubmitParams.url = form[0].action;
        }

        if (o.hrefparameter) {
            ajaxSubmitParams.url = ajaxSubmitParams.url + '?' + o.hrefparameter;
        }

        ajaxSubmitParams.cache = false;
        //ajaxSubmitParams.forceSync = true;
        ajaxSubmitParams.async = true;

        ajaxSubmitParams.complete = function(request, status) {
            var f = $(form[0]),
                et = request.responseText,
                errors;
            if ($.isFunction(o.validateFunction)) {
                if (et && et.length > 10) {
                    submit = false;
                    if(et.substring(0,2) === "/*") {
                        // Handle Validation Errors for all Struts2 versions until 2.2.3.1
                        errors = $.parseJSON(et.substring(2, et.length - 2));
                    }
                    else {
                        errors = $.parseJSON(et);
                    }
                    o.validateFunction(f, errors);
                }
            }
            else if (StrutsUtils !== undefined) {
                StrutsUtils.clearValidationErrors(form[0]);

                // get errors from response
                if(et.substring(0,2) === "/*") {
                    errors = StrutsUtils.getValidationErrors(et);
                }
                else {
                    errors = StrutsUtils.getValidationErrors($.parseJSON(et));
                }

                // show errors, if any
                if (errors.fieldErrors || errors.errors) {
                    StrutsUtils.showValidationErrors(form[0], errors);
                    submit = false;
                }
            }
            self.log('form validation : ' + submit);
            orginal.formvalidate = submit;

            if (o.onaftervalidation) {
                $.each(o.onaftervalidation.split(','), function(i, topic) { 
                    $elem.publish(topic, $elem, orginal);
                });
            }  

            if(orginal.formvalidate) {
                if ( o.href && o.href != "#") {
                    form[0].action = o.href;
                }
                form.submit();
            }
        };

        form.ajaxSubmit(ajaxSubmitParams);
    }

    return false;
});