当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

i have created one form with dynamically created fields. and i have a one check box with unique ID . when user clicks that check box then only those two fields are visible ("name and age"). after clicking only "age" field need to be validate .

here is my code :

$(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');

});

});

style is :

.selectContainer{

display:none;

}

input[type=checkbox]:checked ~ .selectContainer {

display:block;

}

Html code is:

<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>

problem: the form field "age" is validating successfully by clicking check box ("Any Accompanying Person ?:"). problem is when user try to submit the form without clicking that check box then all so its asking for validate . how get salutation for this ? please help

网友答案:

The validator is within a click handler, which should live outside of that (On the base on the document.ready()).

Also if you just want to validate when that checkbox is clicked you could check it within the javascript and select it via the name of the checkbox (If it has a unique ID each time).

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;
}
网友答案:

Bring all javascript functions outside of click events. Try this formValidator function

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;
     }
分享给朋友:
您可能感兴趣的文章:
随机阅读: