jquery - JQuery Validate 需要一行动态创建的输入，如果有的话

Question

我有一个表格，用户可以在其中填写有关他/她孩子的信息。如果其中一个输入已填充，则应填充所有输入（这意味着需要填充整行输入）。第一行是内置的，但用户可以添加任意多的行（这意味着他/她可以根据需要添加孩子）。

我尝试使用 validate 对象，但这不包括动态生成的输入，所以我最近的尝试是：

HTML

<div class="child-1">
                    <div class="form-row">
                        <div class="col-md-1 headerBlack">
                            <label class="black">Child<span class="childCount">1</span></label>
                        </div>
                        <div class="form-group col-md-3 mb-1">
                            <label for="childName-1">Name</label>
                            <input type="text" class="form-control childs childName-1" id="childName-1" novalidate="novalidate">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="childIdNum-1"><span class="childIdNum-1">ID</span></label>
                            <span class="popoverByOver">
                                <i class="icofont-question-circle question-mark"></i>
                            </span>
                            <input type="number" class="form-control childIdNum-1 childs validateId dirLtr" id="childIdNum-1" data-validate="id" data-validateid="true" novalidate="novalidate">
                            <div class="invalid-feedback">
                                Invalid ID.
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="childBirthday-1">Date Of Birth</label>
                                <div class="input-group date datepicker" id="childBirthday-1" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input childs childBirthday-1" data-target="#childBirthday-1" novalidate="novalidate">
                                    <div class="input-group-append" data-target="#childBirthday-1" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="icofont-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

JS

 const rulesTextDefault = {
  required: true,  
  minlength: 2
}
 function setRules(className){
    $('input.'+className).each(function(index,element) {
        $(element).rules('add', rulesTextDefault);
    });
}

function removeRules(className){
    $('input.'+className).each(function(index,element) {
        $(this).rules('remove', 'required');
        $(this).rules('remove', 'minlength');
    });
}

function commitToRowChangeHandler(className){
    let filedsArray = [];
    $('input.'+className).each(function(index,input) {
        if(input.value) filedsArray.push(input.value);
        $(this).validate();
    });
    if(filedsArray.length > 0){
        setRules(className);
    } else {
        removeRules(className)
    }
}

在那次尝试中没有显示错误，我什至没有在 validate 对象中输入 errorPlacement 方法。

我如何验证是否只需要填充了一个或多个输入的行，而其余的则不需要？

标签： jqueryjquery-validate