表单验证动态创建的元素不起作用 [英] Form validation dynamic created element not working
本文介绍了表单验证动态创建的元素不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在页面中有一些字段（动态创建），我正在尝试提交表单上的每个元素.Bellow代码是示例，只有txtAge字段验证，txtName没有验证。是否有任何选项可以用波纹管代码验证每个字段？
我的尝试：
I have some fields (created dynamically) in a page and I am trying to each element on form submit .Bellow code is sample ,only txtAge field validate, txtName not validating .Is there any option to validate each field with bellow code?
What I have tried:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script>
function txtName_FormValidation() {
document.getElementById('entryForm').onsubmit = function (e) {
if (document.getElementById('txtName').value.length <= 0) {
alert(1)
document.getElementById('span_txtName').innerHTML = 'Please Enter Name.'
return false;
};
}
}
function txtAge_FormValidation() {
document.getElementById('entryForm').onsubmit = function (e) {
if (document.getElementById('txtAge').value.length <= 0) {
alert(2)
document.getElementById('span_txtAge').innerHTML = 'Please Enter Age.'
return false;
};
}
}
</script>
</head>
<body onload="txtName_FormValidation(); txtAge_FormValidation()">
<form id="entryForm">
<input type="text" id="txtName" />
<span id="span_txtName"></span>
<br />
<input type="text" id="txtAge" />
<span id="span_txtAge"></span>
<br />
<button type="submit" value="Sebmit">Submit</button>
</form>
</body>
</html>
推荐答案
尝试
try
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script>
function formValidation() {
document.getElementById('entryForm').onsubmit = function (e) {
debugger
var span_txtName = document.getElementById('span_txtName');
var span_txtAge = document.getElementById('span_txtAge');
span_txtName.innerHTML = ''
span_txtAge.innerHTML = ''
var isValid = true;
if (document.getElementById('txtName').value.length == 0) {
span_txtName.innerHTML = 'Please Enter Name.'
isValid = false;
}
if (document.getElementById('txtAge').value.length == 0) {
span_txtAge.innerHTML = 'Please Enter Age.'
isValid = false;
};
return isValid;
}
}
</script>
</head>
<body onload="formValidation()">
<form id="entryForm">
<input type="text" id="txtName" />
<span id="span_txtName"></span>
<br />
<input type="text" id="txtAge" />
<span id="span_txtAge"></span>
<br />
<button type="submit" value="Sebmit">Submit</button>
</form>
</body>
</html>
这篇关于表单验证动态创建的元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
