Почему мои сообщения об ошибках не отображаются в форме HTML? - PullRequest
Новая
       6

Почему мои сообщения об ошибках не отображаются в форме HTML?

0 голосов
/ 06 февраля 2020

Вот часть HTML: 

<body>
    <div class="container">
        <center>
            <div id="error"></div>
            <form align="center" id="border" style="margin-top:10%;width: 50%;">
                <div>
                    <h1 style="color: white;margin-top: 2%;font-size:644%;">OthelO</h1>

                    <div><input type="text" name="name" placeholder="Name" required></div>

                    <div><input style="margin-top:4%;" type="email" name="email" placeholder="  Email" required></div>

                    <div> <input style="margin-top:4%;" type="password" name="password"placeholder="  Password" required></div>

                    <div> <input style="margin-top:4%;" type="password" name="password_confirmation" placeholder="  Confirm Password" required></div>

                    <div> <input style="margin-top:4%;" type="number" name="phone" placeholder="  Phone(optional)" required></div> <br>

                    <div><input type="checkbox" class="checkbox">
                     <h5 style="color:white;margin-top: -2%;">I agree to the terms & conditions</h5>
                    </div>
                    <button style="border-radius: 16px;" type="button" class="btn btn-primary" value="Submit">Sign Up</button>
                    <br><br>
                </div>

            </form>
        </center>
    </div>
    </div>

</body>

Каждый раз, когда я запускаю эту форму в своем браузере, кнопка отправки не перенаправляет на сообщения об ошибках даже после того, как ничего не поместил в текстовые поля .

Вот часть Javascript: 

<script type="text/javascript">
          const name = document.getElementById("name");
          const email= document.getElementById("email");
          const password=document.getElementById("password");  
          const cpassword=document.getElementById("password_confirmation");
          const number=document.getElementById("phone");
          const form = document.getElementById("border");
          const errorElement = document.getElementById("error");

          form.addEventListener("Submit",(e) => {
            let messages=[]
            if(name.value=='' || name.value==null)
            {
                messages.push("Name is required");
            }

            if(password.value.length < 6)
            {
                messages.push("Password must be longer than 6 characters");
            }



            if(messages.length > 0)
            {
             e.preventDefault();
             errorElement.innerText=messages.join(',');
            }

          })




        </script>

Я предпочитаю писать свой Javascript внутри тега скрипта, а не делать отдельный файл для него, я новичок в Интернете разработка и я не уверен, что тег script имеет какие-либо различия в ошибках.

Ответы [ 3 ]

1 голос
/ 06 февраля 2020

Поскольку javascript чувствителен к регистру, 'S' для Submit в addEventListner должно быть в нижнем регистре. Поэтому код будет - 

form.addEventListner('submit', function(){...});
1 голос
/ 06 февраля 2020

Вы используете getElementById (), но в вашем html нет идентификатора. Вам нужно добавить идентификатор для каждого ввода. Пример: 

<input type="text" id="name" name="name" placeholder="Name" required>

И вам не нужен пустой div

0 голосов
/ 06 февраля 2020

Большинство проблем в вашем коде уже упоминалось другими комментаторами. Но вот рабочее решение.

Сначала для ваших входов нужны идентификаторы: 

<input type="text" id="name" name="name" placeholder="Name" required>
...

Второе: ваша кнопка должна быть кнопкой отправки: 

<input id="submit-btn" type="submit" ...>

Затем Вы можете добавить прослушиватель событий на кнопку: 

const submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click",(e) => {
...
})
...