表单提交时显示的jQuery Modal [英] jQuery Modal that appears on form submit

问题描述

我有这段代码是在用户提交表单时运行的(这是为了阻止他们重新提交表单或离开页面，并让他们知道该表单正在执行操作)

I have this code that I run when a user submits a form (this is to stop them resubmitting the form or leaving the page and let them know that the form is doing something)

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插件向他们显示消息，但模态仍然会出现.所以我的问题是如何显示模态，但前提是没有发生验证错误?

Now this all works fine, except that when a user tries to submit a form that hasn't been filled out correctly I use the jQuery Validation plugin to show them messages BUT the modal will still appear. So my question is how to show the modal but only if NO validation errors have occurred?

这是我的验证代码的示例:

Here is an example of my validation code:

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

我当时正在考虑也许使用这样的东西:

I was thinking of maybe using something like this:

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

如果验证错误运行可以运行?还是会有更好的方法来做到这一点?谢谢.

that could be run if the validation errors run? Or would there be a much better way to do this? Thanks.

推荐答案

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()的顺序是否正确，因此您可能必须切换这些顺序.同样，从技术上讲，您不是在隐藏和显示，而是在添加和删除.

Not sure if that is the right order with Hide/ShowModal(), so you may have to switch those. Also, technically you're not hiding and showing, but adding and removing.

这篇关于表单提交时显示的jQuery Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！