出现在表单提交上的 jQuery 模态 [英] 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?

这是我的验证码示例:

$(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 模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！