Question

我正在开发一个jQuery Mobile网站，并使用jQuery验证插件来验证我的表单。在某些表单上，我设置了data-ajax =“false”，但仍然希望在单击提交按钮时显示加载微调器。要显示微调器，我使用以下代码

// Display spinner
$(document).delegate('.ajaxSpinner', 'click', function () {
    if($(".ajaxValidate").length == 0 || $(".ajaxValidate").valid()) { // Show spinner if no validation or form is valid
        $.mobile.showPageLoadingMsg();
    }
});

表单提交按钮有一个'ajaxSpinner'类，表单本身有一个'ajaxValidate'类。

在大多数表单上，这很有效，如果单击提交时表单无效，则看不到微调器，而如果表单有效，则显示微调器。

我只有一个不好玩的单一形式......无论表单是否有效，微调器都会显示。表格很长，所以我想知道在手动显示微调器代码之前验证是否还没有完成。

我对jQuery不是很熟练，所以有人能发现我的代码中存在缺陷吗？这可能是一个时间问题吗？如果是，是否有一种很好的方法可以确保在点击功能触发之前完成验证？

Answer 1

我认为你需要在验证函数中调用微调器。

因此，使用验证插件，通常可能会出现以下情况：

$(".ajaxValidate").validate({
    submitHandler : function(form) {

        // START YOUR SPINNER HERE
        $.mobile.showPageLoadingMsg();

        $(form).ajaxSubmit({

            success: function() {    // YOUR FORM WAS SUBMITTED  SUCCESSFULLY

                // DO SOMETHING WHEN THE FORM WAS SUBMITTED SCESSFULLY ...
                // ...

                // STOP THE SPINNER EVENTUALLY
                //$.mobile.hidePageLoadingMsg()

            }
        });
    }
});

希望这会有所帮助。如果这对您有用，请告诉我。

jQuery Mobile显示微调器

1 个答案: