我有一张表格，用于输入有关我的员工进行银行存款时的支票和现金付款的信息。如果存款中有多个支票和/或现金支付，用户可以单击按钮添加其他字段。按钮调用的函数还会通过增加数字来更改其他字段的ID和名称。
我无法看到如何为这些附加字段添加引导验证，因为ID都是唯一的。
形式：
<form id="depositForm" name="depositForm" method="post" action="deposit.php">
<div class="form-group" id="checks">
<h3>Check 1:</h3>
<div class="row" id="check_1">
<div class = "col-md-4 padding-top-10">
<label for="checkInvoiceNumber_1" class="control-label">Invoice #:</label>
<input type="text" class="form-control" id="checkInvoiceNumber_1" name="checkInvoiceNumber_1" placeholder="Enter Invoice # payment is for"/>
</div>
<div class = "col-md-4 padding-top-10">
<label for="checkNumber_1" class="control-label">Check #:</label>
<input type="text" class="form-control" id="checkNumber_1" name="checkNumber_1" placeholder="Enter Check #"/>
</div>
<div class = "col-md-4 padding-top-10">
<label for="checkAmount_1" class="control-label">Check Amount:</label>
<input type="text" class="form-control" id="checkAmount_1" name="checkAmount_1" placeholder="Enter $Amount of Check"/>
</div>
</div>
</div>
<div class="row padding-top-10" align="center" >
<input type="button" class="btn btn-primary" id="add_check()" onClick="addCheck()" value="Add Check"/>
</div>
<div class="form-group" id="cash">
<h3>Cash Payment 1:</h3>
<div class="row" id="cash_1">
<div class = "col-md-4 padding-top-10">
<label for="invoiceNumber" class="control-label">Invoice #:</label>
<input type="text" class="form-control" id="invoiceNumber_1" name="invoiceNumber_1"placeholder="Enter Invoice # payment is for"/>
</div>
<div class = "col-md-4 padding-top-10">
<label for="cashAmount" class="control-label">Cash Amount:</label>
<input type="text" class="form-control" id="cashAmount_1" name="cashAmount_1" placeholder="Enter $Amount of Cash"/>
</div>
</div>
</div>
<div class="row padding-top-10" align="center" >
<input type="button" class="btn btn-primary" id="add_cash()" onClick="addCash()" value="Add Cash"/>
</div>
<div class="row padding-top-10" align="center" >
<button type="submit" class="btn btn-success">Submit Deposit</button>
</div>
</form>
使用增加的ID /名称添加其他检查字段的JavaScript：
function addCheck()
{
check_i++;
var checkDiv = document.createElement('div');
checkDiv.innerHTML = '<h3>Check '+check_i+':</h3><div class="row" id="check_'+check_i+'"><div class = "col-md-4 padding-top-10"><label for="checkInvoiceNumber_'+check_i+'" class="control-label">Invoice #:</label><input type="text" class="form-control" id="checkInvoiceNumber_'+check_i+'" name="checkInvoiceNumber_'+check_i+'" placeholder="Enter Invoice # payment is for"/></div><div class = "col-md-4 padding-top-10"><label for="checkNumber_'+check_i+'" class="control-label">Check #:</label><input type="text" class="form-control"id="checkNumber_'+check_i+'" name="checkNumber_'+check_i+'" placeholder="Enter Check #"/></div><div class = "col-md-4 padding-top-10"><label for="checkAmount_'+check_i+'" class="control-label">Check Amount:</label><input type="text" class="form-control" id="checkAmount_'+check_i+'" name="checkAmount_'+check_i+'" placeholder="Enter $Amount of Check"/></div></div>';
document.getElementById('checks').appendChild(checkDiv);
}
我想申请表格的验证样本;在这种情况下，“checkAmount_n”字段：
$(document).ready(function () {
var validator = $("#depositForm").bootstrapValidator({
fields : {
checkAmount_1 :{
message : "The check amount is required",
validators : {
notEmpty : {
message : "Please enter the check amount! Ex: 99.99"
},
numeric : {
message : "this must be a number! Ex: 99.99"
},
lessThan : {
value : 1000000,
message : "No way someone payed us over $1 million to do anything!"
},
greaterThan : {
value : 0.001,
message : "Surely we received at least 1 cent?"
}
}
}
验证显然适用于原始字段checkAmount_1，但如何为checkAmount_2，checkAmount_3等添加验证...因为它们是通过按钮点击添加的？
如果这一切都很愚蠢，请让我知道......我对编程非常陌生，而且显然只是在抨击它。
答案 0 :(得分：0)
您可以使用以下示例中使用的addField bootstrapValidator方法：
对于您的问题，您可以按如下方式更改addCheck功能：
function addCheck()
{
check_i++;
var checkDiv = document.createElement('div');
checkDiv.innerHTML = '<h3>Check '+check_i+':</h3><div class="row" id="check_'+check_i+'"><div class = "col-md-4 padding-top-10"><label for="checkInvoiceNumber_'+check_i+'" class="control-label">Invoice #:</label><input type="text" class="form-control" id="checkInvoiceNumber_'+check_i+'" name="checkInvoiceNumber_'+check_i+'" placeholder="Enter Invoice # payment is for"/></div><div class = "col-md-4 padding-top-10"><label for="checkNumber_'+check_i+'" class="control-label">Check #:</label><input type="text" class="form-control"id="checkNumber_'+check_i+'" name="checkNumber_'+check_i+'" placeholder="Enter Check #"/></div><div class = "col-md-4 padding-top-10"><label for="checkAmount_'+check_i+'" class="control-label">Check Amount:</label><input type="text" class="form-control" id="checkAmount_'+check_i+'" name="checkAmount_'+check_i+'" placeholder="Enter $Amount of Check"/></div></div>';
document.getElementById('checks').appendChild(checkDiv);
$("#depositForm").bootstrapValidator('addField','checkAmount_'+check_i, {
message: 'The check amount is required',
validators: {
notEmpty : {
message : "Please enter the check amount! Ex: 99.99"
},
numeric : {
message : "this must be a number! Ex: 99.99"
},
lessThan : {
value : 1000000,
message : "No way someone payed us over $1 million to do anything!"
},
greaterThan : {
value : 0.001,
message : "Surely we received at least 1 cent?"
}
}
} );
}