本文介绍了如何添加停止使用JQuery验证的多表单提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在验证完成并且表单提交后停止禁用提交按钮，这样我就不会有多个对数据库的插入。我没有更新完整的表单验证文章，因为大多数人说这是错的，但我不这么认为。
以下是submit：
< input class =button2style =border-right：none; font-size：13px; name =List Itemid =submittype =submitvalue =List Item/>
和下面的jQuery验证：
< script src =http://jquery.bassistance.de/validate/jquery.validate.js>< / script>
< script src =http://jquery.bassistance.de/validate/additional-methods.js>< / script>
< script>
$（#UploadForm）.validate（{
errorLabelContainer：#messageBox，
包装：td，
规则： {
<？php if（$ type =='Aution'|| $ type =='Both'）{？>
auction_price：{
required：true ，
number：true，
min：1.00
}，
auction_reserve_price：{
number：true，
range：[1.00，500000.00]
$ b<？php if（$ type =='BuyItNow'|| $ type =='Both'）{？> ;
auction_bin_price：{
required：true，
number：true，
range：[1.00，500000.00]
}，<？php} ？>
国家：{
required：true
}，
select3：{
required：true
}，
select2：{
required：true
}，
auction_postage_type：{
required：true
}，
auction_postage_type_price：{
number：true，
range：[0.00，500000.00]
}，
auction_int_postage_type_price：{
number：true，
range： [1.00,500000.00]
}，
Europe1：{
number：true，
range：[1.00，500000.00]
}，
俄罗斯1：{b $ b数量：true，
范围：[1.00,500000.00]
}，
NorthAmerica1：{
数字：true，
范围： [1.00，500000.00]
}，
澳大利亚1：{
数字：true，
范围：[1.00,500000.00]
}，
SouthAmerica1：
number：true，
range：[1.00，500000.00]
}，
Africa1：{
number：true，
range：[1.00，500000.00 ]
}，
Asia1：{b $ b数字：true，
范围：[1.00，500000.00]
}，
MiddleEast1：{
数量：真，
范围：[1.00，500000.00]
}，
auction_item_quantity：{
required：true，
digits：true，
range：[1，99]
}，
auction_description：{
required：true
}，
auction_int_postage_type：{
required：true
}，
listing_type： {
required：true
}
}，
消息：{
auction_price：请输入拍卖开始价格 - 十进制格式，最小值1.00，
auction_reserve_price：请输入拍卖储备价格 - 十进制格式0.00，
auction_bin_price：请输入立即购买价格 - 十进制格式，最小值1.00，
select3：请选择Main类别，
select2：请选择子类别，
auction_item_quantity：请输入Quentity - 最小1 - 最大99，
auction_description：请输入拍卖描述 - 最小10，最大1000个字符，
listing_type：请选择列表类型，
auction_postage_type：请选择邮资类型，
auction_int_postage_type_price：请输入D中的国际邮资费用最小值1.00，
auction_postage_type_price：请输入十进制格式的邮资费用，
auction_int_postage_type：请选择，
国家：请选择国家，
'b $ b}，
submitHandler：function（form）{
$（'＃submit'）。attr（'disable'，true）.css（'pointer-events'，'none' ）;
}
}）;
< / script>
解决方案
在 submitHandler 禁用提交按钮：
$（＃UploadForm）。validate（{
//所有你在这里的选项
submitHandler：function（form）{
$（'＃submit'）。attr（'disabled'，'disabled'）;
}
}）;
submitHandler 仅在表单有已成功通过验证。只要它返回true，表单将在之后正常提交。如果您希望获得更多幻想，而不是禁用提交按钮，则可以使用全局变量来记住表单是否已提交，然后在第一次后从此函数返回false。
第一次提交后禁用提交按钮的工作示例：
I would like to stop disable submit button once validation is completed and form is submitting so I will not have multiple inserts to DB. I have not updated post with full form validation, because most of you saying that is wrong, but I don't think so.
Here is the submit:
<input class="button2" style="border-right:none; font-size:13px;" name="List Item" id="submit" type="submit" value="List Item" />
And below jQuery validation:
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
$( "#UploadForm" ).validate({
errorLabelContainer: "#messageBox",
wrapper: "td",
rules: {
<?php if ($type == 'Aution' || $type == 'Both') { ?>
auction_price: {
required: true,
number: true,
min: 1.00
},
auction_reserve_price: {
number: true,
range: [1.00, 500000.00]
},
<?php } ?>
<?php if ($type == 'BuyItNow' || $type == 'Both') { ?>
auction_bin_price: {
required: true,
number: true,
range: [1.00, 500000.00]
}, <?php } ?>
Country: {
required: true
},
select3: {
required: true
},
select2: {
required: true
},
auction_postage_type: {
required: true
},
auction_postage_type_price: {
number: true,
range: [0.00, 500000.00]
},
auction_int_postage_type_price: {
number: true,
range: [1.00, 500000.00]
},
Europe1: {
number: true,
range: [1.00, 500000.00]
},
Russia1: {
number: true,
range: [1.00, 500000.00]
},
NorthAmerica1: {
number: true,
range: [1.00, 500000.00]
},
Australia1: {
number: true,
range: [1.00, 500000.00]
},
SouthAmerica1: {
number: true,
range: [1.00, 500000.00]
},
Africa1: {
number: true,
range: [1.00, 500000.00]
},
Asia1: {
number: true,
range: [1.00, 500000.00]
},
MiddleEast1: {
number: true,
range: [1.00, 500000.00]
},
<?php if ($type == 'BuyItNow') { ?>
auction_item_quantity: {
required: true,
digits: true,
range: [1, 99]
},
<?php } ?>
auction_description: {
required: true
},
auction_int_postage_type: {
required: true
},
listing_type: {
required: true
}
},
messages: {
auction_price: "Please Enter Auction Start Price - In Decimal Format, minimum value 1.00",
auction_reserve_price: "Please Enter Auction Reserve Price - In Decimal Format 0.00",
auction_bin_price: "Please Enter Buy It Now Price - In Decimal Format, minimum value 1.00",
select3: "Please Select Main Category",
select2: "Please Select Sub Category",
auction_item_quantity: "Please Enter Quentity - min 1 - max 99",
auction_description: "Please Enter Auction Description - Min 10, Max 1000 characters",
listing_type: "Please Select Listing Type",
auction_postage_type: "Please Select Postage Type",
auction_int_postage_type_price: "Please Enter International Postage Cost In Decimal Format, minimum value 1.00",
auction_postage_type_price: "Please Enter Postage Cost In Decimal Format",
auction_int_postage_type: "Please Select",
Country: "Please Select Country",
},
submitHandler:function(form){
$('#submit').attr('disable',true).css('pointer-events','none');
}
});
</script>
解决方案
In your submitHandler disable the submit button:
$("#UploadForm").validate({
//all your options here
submitHandler:function(form){
$('#submit').attr('disabled','disabled');
}
});
submitHandler is only called when the form has successfully been validated. As long as it returns true, the form will submit as normal afterwards. If you wanted to get more fancy and not disable the submit button, you could have a global variable to remember whether the form has been submitted, and then just return false from this function after the first time.
Working example with submit button being disabled after the first submit: http://jsfiddle.net/ryleyb/hHAvD/
这篇关于如何添加停止使用JQuery验证的多表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！