Question

我有这个代码，我在用户提交表单时运行（这是为了阻止他们重新提交表单或离开页面并让他们知道表单正在做某事）

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

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

Answer 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（）是否是正确的顺序，因此您可能需要切换它们。另外，从技术上讲，你并没有隐藏和显示，而是添加和删除。

表单提交时出现的jQuery Modal

1 个答案: