jQuery阻止表單提交
[英]Jquery prevent form submit
問題描述
我在阻止以下代碼提交表單時遇到了一些問題。 該表格具有動態輸入。 沒有什么要開始的，但后來又添加了用戶。 該代碼不會顯示所有動態域代碼，但是數組中將有5或6個域，如type []。
我想做的是阻止表單提交，直到至少添加了一組動態輸入並進行了驗證。 該代碼還沒有驗證。
我嘗試了以下代碼示例，但是它似乎無法正常工作，當我單擊沒有動態字段的提交時，它仍然會重置所有輸入。
submitHandler: function(form) {
form.submit(function(event) {
event.preventDefault();
});
}
submitHandler: function(form) {
form.submit(function() {
return false();
});
}
如果沒有動態字段，我想顯示一個錯誤，告訴他們在提交表單之前至少完成1次。
在JQuery中x是已經創建的字段數，因此我在想可以用來防止表單提交。
先感謝您。
HTML：
<div class="container">
<h1>AWS CI Reservation</h1>
<div class="row">
<div class="col-md-6 pull-right">
<p><strong>Instructions:</strong></p>
<div class="well well-sm">...</div>
</div>
<div class="col-md-6">
<form role="form" id="aws-res-ci" method="POST">
<div class="form-group">
<label for="reqName">Requester's Name:</label>
<input type="text" class="form-control" id="reqName" name="reqName" placeholder="Enter Requester's Name">
</div>
<div class="form-group">
<label for="reqEmail">Requester's Email:</label>
<input type="text" class="form-control" id="reqEmail" name="reqEmail" placeholder="Enter Requester's Email">
</div>
<div class="form-group">
<label for="projectNum">Project #: <span style="color:grey;font-size:70%">(if known)</span></label>
<input type="text" class="form-control" id="projectNum" placeholder="Enter Project #">
</div>
<div class="form-group">
<label for="projectContact">Project Contact:</label>
<input type="text" class="form-control" id="projectContact" name="projectContact" placeholder="Enter Project Contact">
</div>
<div class="form-group">
<label for="location">Location:</label>
<select class="form-control" name="location" id="location">
<option value="">Please choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="bu">Business Unit requested for:</label>
<select class="form-control" name="bu" id="bu">
<option value="">Please choose...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<hr>
<div id="no-ci"></div>
<div class="input_fields_wrap">
<!-- Start dynamic fields -->
<!-- End dynamic fields -->
</div>
<br>
<br>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Add EC2 Instances <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="add_ec2_instance">Add EC2 Instance</a></li>
<li><a href="#" id="add_ec2_instance">Add EC2 Auto Scaling Instance</a></li>
</ul>
</div>
<span class="pull-right"> </span>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Add Database <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="add_rds_instance">Add RDS Instance</a></li>
<li><a href="#" id="add_elastic_cache_instance">Add Elastic Cache Instance</a></li>
<li><a href="#" id="add_redshift">Add Redshift Istance</a></li>
</ul>
</div>
<span class="pull-right"> </span>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Add Storage <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="add_s3">Add S3 Instance</a></li>
<li><a href="#" id="add_glacier">Add Glacier Instance</a></li>
</ul>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
jQuery的：
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#aws-res-ci").validate({
rules: {
reqName: "required",
reqEmail: {
required: true,
email: true
},
projectContact: {
required: true
},
location: "required",
bu: "required",
ci-count: {
required: true,
min: 1
}
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
//setting up funcations
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_ec2 = $("#add_ec2_instance"); //Add button ID
var x = 0; //initlal text box count
//EC2 Instance
$(add_ec2).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/> \
<a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
//remove item when told
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
});
})(jQuery, window, document);
1 個解決方案
解決方案1
1 2014-11-22 16:12:56
您的代碼...
submitHandler: function(form) {
form.submit(function(event) {
event.preventDefault();
});
}
submitHandler: function(form) {
form.submit(function() {
return false();
});
}
不，不。 通過將.submit()的內submitHander ，你正在做的你想達到什么目的完全相反。
要阻止默認form提交action ...
submitHandler: function(form) {
return false();
}
但是，由於您描述只希望在將字段添加到表單之前才阻止提交，因此完全不能使用submitHandler ，因為它將始終阻止提交。 由於您不能動態切換或更改這些選項，因此只需刪除submitHandler以允許默認行為即可。
然后，您可以使用隱藏的輸入字段，並根據required將其設置為空。 這將通過觸發驗證錯誤來防止提交。 添加動態字段時，只需刪除此隱藏字段即可。 （您甚至可以將隱藏字段上的錯誤消息設置為“請先向表單添加字段”之類的內容。）
您還需要將ignore:選項設置為不忽略任何內容，否則將忽略隱藏的字段。
順便說一句，著名的“ jQuery 4U” jQuery Validate示例/教程講述的是我見過的最糟糕的情況，我不知道它的作者試圖用什么廢話來解決。 確實， 請參閱標簽Wiki以獲取所需的所有信息...
$(document).ready(function() {
$("#aws-res-ci").validate({
ignore: [], // ignore nothing; validate hidden fields
rules: {
// your rules
},
messages: {
// your messages
}
});
//setting up funcations
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_ec2 = $("#add_ec2_instance"); //Add button ID
var x = 0; //initlal text box count
//EC2 Instance
$(add_ec2).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/> \
<a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});
//remove item when told
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
});
});
編輯 ：在更仔細地檢查代碼之后，您required諸如reqName和reqEmail之類的字段，無論您的動態字段如何，它們都會阻止表單提交，因此我不確定您要做什么。
您還有一個主要的語法錯誤，使Validate插件根本無法工作...
ci - count: { // <- this can only be a field 'name' with or without quotes
required: true,
min: 1
}
您的字段名稱不能帶空格。 帶有- ，必須將name括在引號中。 如果那應該是數學運算，那么您也不能這樣做。 由於找不到名稱為ci - count任何輸入元素，因此已將其從您的代碼中刪除，然后您可以看到jQuery Validate正在運行...
如果您試圖在不存在的字段上動態設置規則，則不能這樣做。 在rules key:value對中， key只能包含字段“ name”，不能包含其他任何內容。 動態創建輸入元素后，將立即使用.rules('add')方法分配規則。 另外，您可以在創建元素時添加HTML5屬性，而jQuery Validate插件將自動選擇這些屬性並將其轉換為自己的規則。
<input type="text" name="ci[1]" required="required" min="1" />
防止在 jQuery 表單上提交
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.