getElementById() возвращает ноль в первом элементе

Следующий код - моя простая форма регистрации. Проблема в том, что 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>
Источник

1 ответ

Решение

Первый элемент в elements коллекция является <fieldset>, У него нет имени или значения.

(Да, я знаю, что это не имеет смысла для elements включить наборы полей, но это так).

Проверьте значение theelement.tagName чтобы увидеть, имеете ли вы дело с input/select/textarea, прежде чем пытаться запустить на нем свою процедуру проверки.

Источник
Другие вопросы по тегам