javascript - jquery 在表单验证后显示/隐藏 div

Question

我在表单提交后显示加载消息，如下所示:

<div id="loading" style="display:none;"><img class='image-widthauto' src="/img/Progressbar.gif" /></div>
<div id="content-alert"></div>
<form id="login" method="POST" action="" onsubmit="$('#loading').show();">
..... //input
</form>

我使用 jquery validation 验证我的表单插件:

$(document).ready(function () {
    $("#login").validate({
        errorElement: "div",
        errorPlacement: function(error, element) {
        error.appendTo("div#content-alert").addClass('alert alert-danger');
        }, 
        rules: {
            name: {
                required: true,
                minlength: 6,
                alpha: true,
            },
        },
        messages: {
            name: {
                required: "requied message",
                minlength: "6 character"
            },

        }
    });

});

现在，在表单提交中我看到加载消息和验证错误框(提交空表单值)。当我的表单使用验证插件没有错误时，我需要显示加载消息。

如何解决这个问题？

Answer 1

不使用 onsubmit 属性，而是使用验证器的 submitHandler 回调

$(document).ready(function () {
    $("#login").validate({
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.appendTo("div#content-alert").addClass('alert alert-danger');
        },
        rules: {
            name: {
                required: true,
                minlength: 6,
                alpha: true,
            },
        },
        messages: {
            name: {
                required: "requied message",
                minlength: "6 character"
            },

        },
        submitHandler: function (form) {
            $('#loading').show();
            form.submit();
        }
    });

});