javascript - 添加验证到动态创建的具有唯一名称的输入字段

Question

我有一个表格，用于在我的员工进行银行存款时输入有关支票和现金付款的信息。如果存款中有多笔支票和/或现金付款，用户可以单击按钮添加其他字段。该按钮调用的函数还通过增加数字来更改附加字段的 ID 和名称。

由于 ID 都是唯一的，因此我无法了解如何向这些附加字段添加 Bootstrap 验证。

形式:

<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 等添加验证...因为它们是通过单击按钮添加的？

如果这都是愚蠢的，请告诉我...我对编程非常陌生，而且显然只是在解决这个问题。

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?"
            }
        }
    } );
}