BlockUI 在表单验证之前不工作

Question

我有一个使用 struts2-jquery 插件中的 sj:submit 标签提交的表单。提交按钮设置有 validateFunction 和 onAfterValidationTopic。当用户通过 sj:submit 保存此表单时，我试图使用 jquery 阻止 UI 来阻止该表单。问题是 BlockUI 直到验证完成后才打开。由于这种形式非常广泛并且验证需要一秒钟，因此这种时间差距对用户来说非常明显。

BlockUI 通过添加到按钮的 onClick 参数的 javascript 方法调用。我已将 fadeIn 设置为 0，因此它应该同步执行。

通过断点，我已经确定 BlockUI 在任何 struts2-jquery 验证方法之前被调用，但该块直到表单之后才出现已验证并且已提交或已标记验证警告。

我的操作顺序应该是通过 onClick 参数阻止 UI，让 struts2-jquery 插件提交表单进行验证，然后触发我的 AfterValidationTopic，它将如果验证不成功，请取消阻止 UI。所有这些步骤都以正确的顺序进行，只是我没有看到 UI 被阻止。我不知道为什么会这样。我什至尝试将 jquery.struts2.js 文件中的 $.blockUI 调用添加到 $.elem.click 函数中，结果相同。正在调用块UI，但我没有看到它。

这是我的 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 的异步参数设置为 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;
});

BlockUI 在表单验证之前不工作

BlockUI Not Working Before Form Validation

struts2

blockui

jquery-blockui

struts2-jquery

struts2-jquery-plugin