向具有唯一名稱的動態創建的輸入字段添加驗證

Question

我有一張表格，用於輸入有關我的員工進行銀行存款時的支票和現金支付的信息。 如果存款中有多筆支票和/或現金付款，則用戶可以單擊按鈕以添加其他字段。 按鈕調用的功能還可以通過增加數字來更改其他字段的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>

javascript以增加ID /名稱的形式添加其他檢查字段：

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等呢？

如果這一切都是愚蠢的，請讓我知道...我對編程很陌生，很顯然只是在解決這個問題。

Answer 1

您可以使用bootstrapValidator addField方法，如以下示例所示：

dynamic.html

dynamic2.html

dynamic3.html

對於您的問題，可以如下更改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?"
            }
        }
    } );
}