[英]jquery show/hide div after form validation
I show loading message after form submit like this: 我在表单提交后显示加载消息,如下所示:
<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>
i validate my form using jquery validation plugin: 我使用jquery验证插件验证我的表单:
$(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"
},
}
});
});
Now, in form submit i see loading message and error box of validation(submit empty form value). 现在,在表单提交中,我看到加载消息和验证错误框(提交空表单值)。 i need to show loading message when my form not have a error using validation plugin. 当我的表单使用验证插件没有错误时,我需要显示加载消息。
how do fix this ? 如何解决这个问题?
Instead of using onsubmit
attribute, use the submitHandler
callback of the validator 代替使用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();
}
});
});
Try this : use .valid()
method to decide whether to show loading message or not. 试试看:使用.valid()
方法决定是否显示加载消息。
HTML : 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 ; 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"
},
}
});
});
From what I understand, you want to show the element
with id
loading when the form submits without an error. 据我了解,当表单提交时没有错误,您想显示具有id
加载的element
。
The official documentation says : 官方文件说:
Callback for handling the actual submit when the form is valid. 表单有效时用于处理实际提交的回调。 Gets the form as the only argument. 获取表单作为唯一参数。 Replaces the default submit. 替换默认的提交。 The right place to submit a form via Ajax after it is validated. 验证后通过Ajax提交表单的正确位置。
So you could overwrite the submithandler
like so: 因此,您可以像这样覆盖submithandler
:
Your html (just the form element, the rest could remain the same) : 您的html(只是form元素,其余的可以保持不变):
<form id="login" method="POST" action="#"> //Don't need the onsubmit here
Your javascript could be: 您的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"
},
}
});
Hope it gets you started in the right direction. 希望它能帮助您朝正确的方向开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.