表单验证后jquery显示/隐藏div答案

【问题标题】：jquery show/hide div after form validation表单验证后jquery显示/隐藏div
【发布时间】：2014-10-09 10:47:08
【问题描述】：

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

<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"
            },

        }
    });

});

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

如何解决这个问题？

【问题讨论】：

标签： javascript jquery html forms validation

【解决方案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();
        }
    });

});

【讨论】：

这工作并显示加载，但实际上不提交也不向服务器发送数据。点击提交后，我只看到加载消息。
表单提交是如何完成的...是通过ajax还是普通表单提交完成
在您的演示中，如果您单击提交 jquery 验证而不验证表单并在没有验证的情况下发送数据。演示：jsfiddle.net/mqfm730p/3

【解决方案2】：

试试这个：使用.valid() 方法来决定是否显示加载消息。

HTML：

<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="return showLoading();">
..... //input
</form>

jQuery ;

var form =  $("#login");

function showLoading()
{
  if(form.valid())
  {
   $('#loading').show();
   return true;
  }
  return false;
}

$(document).ready(function () {
    form.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"
            },

        }
    });

});

【讨论】：

【解决方案3】：

据我了解，您希望在表单提交时显示element 和id正在加载。

The official documentation 说：

表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。

所以你可以像这样覆盖submithandler：

您的 html（只是表单元素，其余的可以保持不变）：

 <form id="login" method="POST" action="#"> //Don't need the onsubmit here

您的 javascript 可能是：

 $("#login").validate({
    errorElement: "div",
    errorPlacement: function(error, element) {
    error.appendTo("div#content-alert").addClass('alert alert-danger');
    }, 
    submitHandler: function(form) {
      $('#loading').show();   //Show the required element here
      form.submit(); //Submit the form normally if needed
    },
    rules: {
        name: {
            required: true,
            minlength: 6,
            alpha: true,
        },
    },
    messages: {
        name: {
            required: "requied message",
            minlength: "6 character"
        },

    }
});

希望它能让你朝着正确的方向开始。

【讨论】：