jQuery Mobile显示微调器

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

希望这能有所帮助。让我知道这是否适合你。