选中复选框后如何验证我的表单字段？

Question

我创建了一个带有动态创建字段的表单。我有一个带有唯一 ID 的复选框。当用户单击该复选框时，只有这两个字段可见（“姓名和年龄”）。只需点击“年龄”字段后需要验证。

这是我的代码：

$(document).ready(function() {
    $('#person').click(function() {
        function formValidator(){
            var age = document.getElementsByName('age[]');
            for (var i = 0; i< age.length; i++) {
                if(!isNumeric(age[i], "Please enter a valid Age")){
                    return false;
                }
            }
            return true;
        }

        function isNumeric(elem, helperMsg){
            var numericExpression = /^[0-9]+$/;
            if(elem.value.match(numericExpression)){
                return true;
            } else {
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
   });
});

$(document).ready(function() {
    $('#person').click(function() {
        $('#name').attr('required','required');
        $('#age').attr('required','required');
    });
});

风格是：

.selectContainer{
    display:none;
 }

input[type=checkbox]:checked ~ .selectContainer {
    display:block;
}

HTML代码是：

<form action="" method="post" onSubmit="return formValidator()">
    <label for="name">Any Accompanying Person ?:</label>
    <input  type="checkbox" name="person" id="person" >Yes
    <div class="selectContainer">
        <br>
        <label>Person Details</label>
        <p>
            <div style="padding-left:70px;"> 
                <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
                <input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
            </div>
        </p>
        <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
            <tbody>
                <tr>
                    <p>
                        <td><input type="checkbox" name="chk[]" checked="checked" /></td>
                        <td>
                            <label>Name</label>
                            <input type="text" size="20" name="name[]" id="name"   >
                        </td>
                        <td>
                            <label>Age</label>
                            <input type="text" size="20" name="age[]" id="age"  >
                        </td>
                    </p>
              </tr>
           </tbody>
       </table>
       <div class="clear"></div>
       </fieldset>
   </div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
    <input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
    <input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
    <input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>

问题：通过单击复选框（“任何陪同人员？：”）成功验证表单字段“年龄”。问题是当用户尝试提交表单而不单击该复选框时，所有这些都要求 validate 。怎么得到这个称呼？请帮忙

Answer 1

将所有 javascript 函数带入点击事件之外。试试这个 formValidator 函数

function formValidator(){

        if($("#person").is(":checked")) {

   var age = document.getElementsByName('age[]');
    for (var i = 0; i< age.length; i++) {
  if(!isNumeric(age[i], "Please enter a valid Age")){
    return false;
  }
    }

        }

 return true;
     }

Answer 2

验证器位于点击处理程序中，该处理程序应位于该处理程序之外（基于 document.ready()）。

此外，如果您只想验证单击该复选框的时间，您可以在 javascript 中检查它并通过复选框的名称选择它（如果它每次都有唯一的 ID）。

function formValidator(){
    var age = document.getElementsByName('age[]');
    if($("input[name = 'chk[]']").prop('checked')){
        for (var i = 0; i< age.length; i++) {
            if(!isNumeric(age[i], "Please enter a valid Age")){
                return false;
            }
        }
    }
    return true;
}