Почему поле заполнено, но срабатывает required?

Question

[ArtJH]

Код:

<form action="" class="contacts-form__wrapper container _form-expectation">
            <p class="contacts-form__title">Оставьте заявку</p>
            <div class="contacts-form__row">
                <div class="contacts-form__column">
                    <input type="text" class="contacts-form__input" placeholder="Тема обращения*" required oninvalid="this.setCustomValidity('Заполните это поле')">
                    <input type="text" class="contacts-form__input" placeholder="ФИО*" required oninvalid="this.setCustomValidity('Заполните это поле')">
                    <input type="text" class="contacts-form__input form__phone" placeholder="Телефон*" required oninvalid="this.setCustomValidity('Заполните это поле')">
                    <textarea class="contacts-form__textarea" placeholder="Сообщение*" required oninvalid="this.setCustomValidity('Заполните это поле')"></textarea>
                </div>
                
            </div>
            <button type="submit" class="contacts-form__btn main-btn">
                <svg class="main-btn__icon" version="1.1" width="512" height="512" x="0" y="0"
                     viewBox="0 0 31.49 31.49"
                     style="enable-background:new 0 0 512 512" xml:space="preserve">
                        <path xmlns="http://www.w3.org/2000/svg" style=""
                              d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111  C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587  c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"
                              fill="#ffffff" data-original="#1e201d" class=""/>
                   </svg>
                <div class="main-btn__name">Отправить</div>
                <div class="main-btn__circle"></div>
            </button>
        </form>

JS

let btnForm = document.querySelectorAll('.contacts-form__btn');
    if(btnForm){
        [].forEach.call(btnForm, function (el){
            el.addEventListener('click', function (){
                //let form = findAncestor(btnForm, '_form-expectation');

                let form = $(el).parent("._form-expectation");


                form.find('input').filter(function(){
                    return $(this).toggleClass('empty', !this.value)
                });
                form.find('textarea').filter(function(){
                    return $(this).toggleClass('empty', !this.value)
                });

                //document.querySelector('.popup-form').classList.add('sent');
            });
        });
    }

Comments

[twolegs]

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

[ArtJH]

twolegs, обновил, но не думаю что поможет

Answer 1

[Даша Циклаури]

проблема в том, что ты не сбрасываешь состояние инвалидности, у тебя срабатывает oninvalid когда что-то не так, а когда все верно никакого хэндлера нет
грубо говоря нужно что-то похожее на onvalid

Answer 2

[NonameProgrammer]

Я так понимаю проблема кроется не в том, что поле заполнено, а в том, что оно не соответствует классу (т.е форме контакта). Возможно, ошибка в формате ввода значения.

Comments

[ArtJH]

Тип подходящий
type="text"