出现在表单提交上的 jQuery 模态答案

【问题标题】：jQuery Modal that appears on form submit出现在表单提交上的 jQuery 模态
【发布时间】：2011-03-19 11:51:14
【问题描述】：

当用户提交表单时，我会运行这段代码（这是为了阻止他们重新提交表单或离开页面并让他们知道表单正在执行某些操作）

var lastx = 0;

var loadingAnim = setInterval(function () { UpdateSpinner("#loading", 128, 1536); }, 32);

function UpdateSpinner(target, step, width)
{
    $(target).css("background-position", lastx + "px 0px");
    lastx = (lastx - step) % width;
}

var objModal = '<div id="overlay"><div id="loading">loading...</div></div>';

function ShowModal()
{
    jQuery('body').append(objModal);
}

$('form').submit(function() { ShowModal(); });

现在一切正常，除了当用户尝试提交未正确填写的表单时，我使用 jQuery Validation 插件向他们显示消息，但模式仍然会出现。所以我的问题是如何显示模式，但前提是没有发生验证错误？

这是我的验证码示例：

$(function() {
    $("#postform").validate({
        rules: {
            post_title: "required",
            post_url: {
                required: {
                    depends: function() {
                        return $('input[name=post_category]:checked').val() == '14';
                    }
                },
                url: true
            },
            post_code: {
                required: {
                    depends: function() {
                        return $('input[name=post_category]:checked').val() == '13';
                    }
                }
            },
            post_content: "required",
            post_tags: "required"
        },
        messages: {
            post_title: "Your post MUST have a title",
            post_url: "Please enter a valid URL, don't forget the http://",
            post_code: "Please add your code",
            post_content: "Your post MUST have some content",
            post_tags: "Please add some tags"
        }
    });
});

我在想也许可以使用这样的东西：

function HideModal()
{
    jQuery('body').remove(objModal);
}

如果验证错误运行，可以运行吗？或者会有更好的方法来做到这一点？谢谢。

【问题讨论】：

标签： jquery validation forms modal-dialog

【解决方案1】：

numberOfInvalids() 应该可以工作：

var $validator = {};

$(function() {
    $validator = $("#postform").validate({

        // yada yada validate stuff

    });
});

function ShowModal()
{
    jQuery('body').append(objModal);
}

function HideModal()
{
    jQuery('body').remove(objModal);
}

$('form').submit(function() {
    if ($validator.numberOfInvalids() > 0) {
        HideModal();
    } else {
        ShowModal();
    }
});

不确定 Hide/ShowModal() 的顺序是否正确，因此您可能需要切换它们。此外，从技术上讲，您不是隐藏和显示，而是添加和删除。

【讨论】：