Задать вопрос
@Redwhaler
javascript

Почему у поля input атрибут required не срабатывает?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="forms">
        <h1>Форма опроса</h1>
        <form>
            <div class="Name">
                <label class="lname">Имя пользователя:</label>
                <input class="name" type="text" required/>
            </div>
            <div class="Email">
                <label class="lemail">Email:</label>
                <input class="email" type="text" required/>     
            </div> 
            <div class="Button">
                <button class="button" type="submit">Отправить</button>
            </div>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>


let Name = document.querySelector('.Name');
let Email = document.querySelector('.Email');
let button = document.querySelector('.button');
let forms = document.querySelector('.forms');

let labels = document.querySelectorAll('label');
let labelsArr = [...labels];
let inputs = document.querySelectorAll('input');
let inputsArr = [...inputs];

let newDiv = document.createElement('div');
forms.append(newDiv);

button.onclick = function(e) {
    e.preventDefault();
    let P = document.querySelectorAll('p');
    if(P) { 
            P.forEach(p => {
                p.remove();
            })
        }


   let result = labelsArr.map((label, index) => `${label.textContent} ${inputsArr[index].value}`);    

    result.forEach(index => {
            let p = document.createElement('p');
            p.textContent =  index;
            newDiv.append(p);      
        })
    }

Name.style.marginBottom = "20px";

Email.style.marginBottom = "20px";


Не срабатывает required при нажатии кнопки. Почему? Не появляется уведомление, что нужно ввести данные перед нажатием кнопки. Так понимаю это связано с preventDefault(), но как это исправить?
  • Вопрос задан
  • 341 просмотр
3 комментария
Подписаться 2 Простой 3 комментария
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию
    6 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 2
Wispik
@Wispik
Потому что надо обрабатывать событие submit у формы, а не click у кнопки
Ответ написан
Комментировать
Комментировать
opium
@opium
Просто люблю качественно работать
у тебя preventDefault() на клике — он срабатывает раньше, чем браузер успевает проверить required. Переключись на submit у формы:

let form = document.querySelector('form');
form.addEventListener('submit', function(e) {
    e.preventDefault();
    // весь твой код сюда
});


тогда браузер сначала проверит поля, и если пустые — до обработчика не дойдёт.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы