验证不适用于动态创建的值
Validation not working for dynamically created values
我已经创建了一个表单以及动态创建的表单字段(姓名、年龄)。在尝试使用 javascript 验证我的年龄字段时,只有年龄字段的第一条记录正在验证 - 其他记录没有。
密码是:
<script type="text/javascript">
function formValidator(){
var age = document.getElementById('age');
if(isNumeric(age, "Please enter a valid Age")){
return true;
}
return false;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
HTML 代码是:
<html>
< body>
<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>
</body>
</html>
只有第一个字段正在验证。如何验证动态生成的字段?
表单元素的 ID 重复。仅针对与 ID 匹配的第一个元素。您应该使用相同的 class 并针对所有这些进行验证。给 class age 而不是 id 然后使用:
function formValidator(){
var age = document.getElementsByClassName('age');
for (var i = 0; i< age.length; i++) {
if(!isNumeric(age[i], "Please enter a valid Age")){
return false;
}
}
return true;
}
如果您使用的是动态值,则将动态 ID 传递给 javascript 函数,然后进行验证
例如:
for(i=0;i<results;i++)
{
<input type="text" size="20" name="age[]" id="age"<?php echo i; ?> >
}
然后在 javascript 函数中读取所有动态 ID 并进行验证。
您只获取了一个元素并使用重复的 ID 创建它。您应该获取所有元素并使用循环检查它们。
function formValidator(){
var ageEls = document.getElementsByName('age[]'),
valid = true,
i = 0;
while (i < ageEls.length && valid) {
valid = isNumeric(ageEls[i], "Please enter a valid Age");
i++;
}
return valid;
}
JSFiddle 示例:http://jsfiddle.net/3zsLhe9c/3/
错误就在这一行。 getElementById returns DOM 元素而不是它的值。
var age = document.getElementById('age');
要获取 DOM 元素中的值,您应该使用 'value' 属性。
var age = document.getElementById('age').value;
希望能解决问题。
对于 jquery 如果你使用这个 "jquery.validate.unobtrusive.js" js,我有共鸣。
$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
我已经创建了一个表单以及动态创建的表单字段(姓名、年龄)。在尝试使用 javascript 验证我的年龄字段时,只有年龄字段的第一条记录正在验证 - 其他记录没有。
密码是:
<script type="text/javascript">
function formValidator(){
var age = document.getElementById('age');
if(isNumeric(age, "Please enter a valid Age")){
return true;
}
return false;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
HTML 代码是:
<html>
< body>
<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>
</body>
</html>
只有第一个字段正在验证。如何验证动态生成的字段?
表单元素的 ID 重复。仅针对与 ID 匹配的第一个元素。您应该使用相同的 class 并针对所有这些进行验证。给 class age 而不是 id 然后使用:
function formValidator(){
var age = document.getElementsByClassName('age');
for (var i = 0; i< age.length; i++) {
if(!isNumeric(age[i], "Please enter a valid Age")){
return false;
}
}
return true;
}
如果您使用的是动态值,则将动态 ID 传递给 javascript 函数,然后进行验证
例如:
for(i=0;i<results;i++)
{
<input type="text" size="20" name="age[]" id="age"<?php echo i; ?> >
}
然后在 javascript 函数中读取所有动态 ID 并进行验证。
您只获取了一个元素并使用重复的 ID 创建它。您应该获取所有元素并使用循环检查它们。
function formValidator(){
var ageEls = document.getElementsByName('age[]'),
valid = true,
i = 0;
while (i < ageEls.length && valid) {
valid = isNumeric(ageEls[i], "Please enter a valid Age");
i++;
}
return valid;
}
JSFiddle 示例:http://jsfiddle.net/3zsLhe9c/3/
错误就在这一行。 getElementById returns DOM 元素而不是它的值。
var age = document.getElementById('age');
要获取 DOM 元素中的值,您应该使用 'value' 属性。
var age = document.getElementById('age').value;
希望能解决问题。
对于 jquery 如果你使用这个 "jquery.validate.unobtrusive.js" js,我有共鸣。
$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");