getElementById() returns 第一个元素为空

Question

下面的代码是我的简单注册表。问题是 alert(elements[0].value) 显示 undefined 而不是 name 的值（这是我表单的第一个元素）。但是，如果我尝试执行 alert(elements[1].value)，它会毫无问题地显示 name 的值。有什么想法吗？

<html>
    <body>
        <form name="register" id="register" method="POST" action="this-file.php">
            <fieldset>
                <legend><span style="color:red; font-size:20px">
                        Register</span></legend><br>

                <label for="firstname">First name<span style="color:red;">*</span></label>
                <input type="text" name="firstname" id="firstname" placeholder="Peter"
                       autofocus required><br><br>

                <label for="lastname">Last name<span style="color:red;">*</span></label>
                <input type="text" name="lastname" id="lastname" placeholder="Parker"
                       required><br><br>

                <label for="password">Password<span style="color:red;">*</span></label>
                <input type="password" name="password" id="password" required><br><br>

                <label for="favfood">Favorite food<span style="color:red;">*</span></label>
                <select name="favfood" id="favfood" required>
                    <option value="" selected>(none)</option>
                    <option value="chicken">Chicken</option> 
                    <option value="pizza">Pizza</option>
                    <option value="pasta">Pasta</option>
                    <option value="hamburger">Hamburger</option>
                    <option value="steak">Steak</option>
                </select>
                <p>Gender<span style="color:red;">*</span></p>
                <ul>
                    <li>
                        <input type="radio" name="gender" id="male" value="male" required>
                        <label for="male">Male</label>
                    </li>
                    <li>
                        <input type="radio" name="gender" id="female" value="female" required>
                        <label for="female">Female</label>
                    </li>
                </ul>
            </fieldset><br>
            <input type="submit" value="Register" name="register"> 
            <input type="reset" value="Clear form" name="clear"><br><br>
        </form>
        <script type="text/javascript">
            var form = document.getElementById('register');
            var elements = form.elements;

            form.noValidate = true;
            form.addEventListener('submit', function (event) {
                alert(elements[0].value); //displays "undefined" -- why?
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].hasAttribute("required")) {
                        if (!elements[i].checkValidity()) {
                            event.preventDefault();
                            alert('Please, fill in every required field.');
                            form.reset();
                            elements[0].focus();
                            break;
                        }
                    }
                }
            }, false);
        </script>
    </body>
</html>

Answer 1

elements 集合中的第一个元素是 <fieldset>。它没有名称或值。

（是的，我知道 elements 包含字段集确实没有意义，但确实如此）。

测试 theelement.tagName 的值，看看您是否正在处理 input/select/textarea，然后再尝试运行您的验证例程。

getElementById() returns 第一个元素为空

getElementById() returns null on first element

html

javascript

getelementbyid