如何在选中“我的复选框”后验证我的表单字段

how to validate my form field after my check box is checked?

本文关键字：我的 验证 表单 字段 我的复选框 复选框      更新时间：2023-09-26

我创建了一个带有动态创建的字段的表单。 我有一个带有唯一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>

问题：表单字段"年龄"通过单击复选框（"任何陪同人员？："）成功验证。问题是当用户尝试提交表单而不单击该复选框时，则全部要求验证。如何为此获得称呼？请帮忙

验证器位于点击处理程序内，该处理程序应位于该处理程序之外（基于 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;
}

将所有 JavaScript 函数置于点击事件之外。试试这个表单验证器函数

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;
     }
相关文章：