我遇到了一些阻止以下代码提交表单的问题。 表单具有动态输入。没有什么可以开始，但它们被添加，但用户以后。 此代码不显示所有动态字段代码，但数组中将有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);
答案 0 :(得分：1)
您的代码......
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，其值为nothing。这将通过触发验证错误来阻止提交。添加动态字段时，只需删除此隐藏字段即可。 （您甚至可以将隐藏字段上的错误消息设置为类似＆＃34;请先在表单中添加字段。＆＃34; 或其他任何内容。）
您还需要设置ignore:选项以忽略其他内容，忽略隐藏字段。
$(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现在正在运行...
<强> http://jsfiddle.net/rpj9s3nt/
如果您尝试在不存在的字段上动态设置规则，则不能这样做;在rules key:value对中，key只能包含字段＆＃39;名称＆＃39;，没有别的。 The .rules('add') method是您在动态创建输入元素后立即分配规则的方法。或者，您可以在创建元素时添加HTML5属性，jQuery Validate插件将自动选择并转换为自己的规则。
<input type="text" name="ci[1]" required="required" min="1" />