验证不适用于动态创建的值
Posted
技术标签:
【中文标题】验证不适用于动态创建的值【英文标题】：Validation not working for dynamically created values 【发布时间】：2015-03-05 08:46:03 【问题描述】：我创建了一个表单以及动态创建的表单字段（姓名、年龄）。在尝试使用 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 匹配的第一个元素。您应该使用相同的类并针对所有这些类进行验证。 有什么线索怎么办？ 查看发布的答案 没有@ArunPrasanth 不工作。甚至都没有验证第一个字段 【参考方案1】：对于 jquery，如果你使用这个“jquery.validate.unobtrusive.js”js，我有 coustion。
$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");$("#FrmSubmitToAgent").removeData("validator");
$("#FrmSubmitToAgent").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
【讨论】：
【参考方案2】：您只得到一个元素并使用重复的 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;
JSFiddler 示例：http://jsfiddle.net/3zsLhe9c/3/
【讨论】：
我的脚本中有一个小错误。我已经修复它并在 JSFiddler 上创建了一个示例。您的 HTML 代码中也存在语法错误。标签。
错误在这一行。 getElementById 返回 DOM 元素而不是它的值。
var age = document.getElementById('age');
要获取 DOM 元素中的值，您应该使用 'value' 属性。
var age = document.getElementById('age').value;
希望能解决这个问题。
【讨论】：
【参考方案4】：如果您使用的是动态值，则将动态 id 传递给 javascript 函数，然后进行验证
例如：
for(i=0;i<results;i++)
<input type="text" size="20" name="age[]" id="age"<?php echo i; ?> >
并在 javascript 函数中读取所有动态 ID 并进行验证。
【讨论】：
【参考方案5】：表单元素的 ID 重复。仅针对与 ID 匹配的第一个元素。您应该使用相同的类并针对所有这些类进行验证。给出班级年龄而不是 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;
【讨论】：
你是否修改了 DOM。您需要将班级年龄添加到所有年龄字段。 我使用类名作为数组。我该如何使用它？ 将var age = document.getElementsByClassName('age');更改为var age = document.getElementsByClassName('array');
你改成。 document.getElementsByClassName('age[]');还是不行
@Nayana：你能和 html 和 js 一起分享小提琴吗？？以上是关于验证不适用于动态创建的值的主要内容，如果未能解决你的问题，请参考以下文章
Fabric JS 2.4.1 ClipPath Crop 不适用于动态创建的矩形蒙版