动态字段（数组输入）验证，带有javascript错误消息

Question

我的表单中有两个输入字段：在children_number字段中输入用户输入后，将动态生成子项名称字段的子项和子项名称。
我可以验证children_number字段。但是我在使用错误消息验证子名称字段时遇到了困难。

我的主要目的是显示错误消息。在这里，我尝试使用Js客户端验证。

// Validate children number

function validateNumber_children(x){
    var re = /[1-9]$/;
    if(re.test(document.getElementById(x).value)){
        document.getElementById(x).style.background ='#ccffcc';
        document.getElementById(x + 'Error').style.display = "none";
        return true;
    }else{
        document.getElementById(x).style.background ='#F6CECE';
        document.getElementById(x + 'Error').style.display = "block";
        return false;
    }
}

// Validate childrens name

function validateStudent_name(x){
    var arr = document.getElementsById('student_name[]');
    var re = /[a-z]$/;
    for(var i=0;i<arr.length;i++) {
       if  ((arr[i].value)= '') {
           return false;
       }
    if(re.test(document.getElementById(x).value)){
        document.getElementById(x).style.background ='#ccffcc';
        document.getElementById(x + 'Error').style.display = "none";
        return true;
    }else{
        document.getElementById(x).style.background ='#F6CECE';
        document.getElementById(x + 'Error').style.display = "block";
        return false;

       }
    }
}


function validateForm() {
    // Set error variable
    var error = 0;
    // For number of children
    if (!validateNumber_children('number_children')) {
        document.getElementById('number_childrenError').style.display = "block";
        error++;
    }

   // for children name

    if(!validateStudent_name('children_name')){
       document.getElementById('student_nameError').style.display = "block";
       error++;
}

if(error > 0){
    return false;
}
}

我的html表单

<form method="POST" action="/contact-us" autocomplete="off" id="test"  onsubmit="return validateForm()">

    <div class="form-group fieldGroup">

        <div class="col-md-6">
            <div class="form-group">
                <label>Number of Children </label>
                <input type="text" class="form-control" name="number_children" id = "number_children" placeholder="Enter number of children" onblur="validateNumber_children(number_children)"  value="{{ old('number_children') }}" >
                <span id="number_childrenError" style="display: none;">You must enter a integer  number. Ex: 4 </span>
            </div>
        </div>

        <hr>
        <div id="outputArea">
        </div>

    </div>

    <div class="col-md-12">
        <div class="form-group">
            <input type="submit" class="btn btn-success btn-md" value="Submit">
            <input type="reset" class="btn btn-primary btn-md" value="Reset">
        </div>
    </div>

</form>

Java脚本代码

$("#number_children").change(function() {
    var htmlString = "";
    var len = $(this).val();
    for (var i = 0; i < len; i++) {
        k = i+1;
        "<br>"
        htmlString += (' \Children Information '+ k +')  ;
        htmlString +=

            "    <label> Name of Student </label>\n" +
            "    <input type=\"text\" class=\"form-control\" name=\"student_name[]\" id=\"children_name[]\" onblur =\"validateStudent_name(student_name[])\" placeholder=\"Student Name"+ k +"\" value = \"{{ old('student_name.*') }}\">\n" +
            " <span id=\"student_nameError\" style=\"display: none;\"> You must enter children's name</span>"+
    }
    $("#outputArea").html(htmlString);
})

jQuery触发

$(function(){
    //jQuery code here
    $('#number_children').trigger('change');
});