Javascript 创建的动态表单验证无效_Javascript_Html

Javascript 创建的动态表单验证无效

javascript html

Javascript 创建的动态表单验证无效,javascript,html,Javascript,Html,我在一个页面中有一些字段（动态创建），我正在尝试提交表单上的每个元素。下面的代码是示例，仅txtAge字段验证，txtName未验证。是否有选项使用下面的代码验证每个字段 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script

我在一个页面中有一些字段（动态创建），我正在尝试提交表单上的每个元素。下面的代码是示例，仅txtAge字段验证，txtName未验证。是否有选项使用下面的代码验证每个字段

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


指数
函数txtName_FormValidation（）{
document.getElementById（'entryForm'）。onsubmit=function（e）{
如果（document.getElementById（'txtName'）.value.length为什么不这样做
从同一个函数调用所有验证
<script>

    document.getElementById('entryForm').onsubmit = function(e){
            txtName_FormValidation(e);
            txtAge_FormValidation(e);
    }

        function txtName_FormValidation(e) {
                if (document.getElementById('txtName').value.length <= 0) {
                    alert(1)
                    document.getElementById('span_txtName').innerHTML = 'Please Enter Name.'
                    return false;
                };
        }
        function txtAge_FormValidation(e) {
                if (document.getElementById('txtAge').value.length <= 0) {
                    alert(2)
                    document.getElementById('span_txtAge').innerHTML = 'Please Enter Age.'
                    return false;
                };
        }
    </script>


document.getElementById（'entryForm'）。onsubmit=function（e）{
txtName_FormValidation（e）；
txtAge_FormValidation（e）；
}
函数txtName\u FormValidation（e）{
如果（document.getElementById（'txtName'）.value.length您正在替换第一个onsubmit事件，因此仅调度第二个函数
您可以尝试以下方法：
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            document.getElementById('entryForm').onsubmit = function (e) {
                e.preventDefault();
                if (document.getElementById('txtName').value.length <= 0) {
                    alert(1)
                    document.getElementById('span_txtName').innerHTML = 'Please Enter Name.'
                };
                if (document.getElementById('txtAge').value.length <= 0) {
                    alert(2)
                    document.getElementById('span_txtAge').innerHTML = 'Please Enter Age.'
                };
            }
        }, false);

    </script>
</head>
<body >
    <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>


指数
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（'entryForm'）。onsubmit=function（e）{
e、 预防默认值（）；
if（document.getElementById（'txtName'））.value.length尝试在提交时调用表单标记中的函数，如下所示：
而不是在body标记中加载时调用它们不幸的是现在不起作用刚刚注意到，如果您只想检查用户是否在输入中引入了任何值，为什么不在每个输入中使用required
？除非您有每一项的价值input@Nitesh答案也很好，但通常用于更复杂的验证（如检查年龄是否高于某个值）…如果您只想检查用户是否在输入中引入了内容，只需使用required
，您就不会编写不必要的代码。但这是您的决定：）