Как выделить неправильно заполненные поля формы?

Question

[Иван Медведев]

К названию вопроса и нечего добавить. Есть предположение, что можно к незаполненным или неправильно заполненным полям добавить класс и на класс вешать стили.
Вопрос: как это сделать?
Код формы ниже:

Answer 1

[Владимир Коротенко]

Просто поищите на сайте MDN. Там освящены все подходы, во всяком случае с этим кейсом

https://developer.mozilla.org/ru/docs/Learn/HTML/F...

Answer 2

[ediboba]

Вот пример с ajaxом boostrapom. ajax возвращает неправильные имена

$.ajax({
        url: url,
        type: method,
        enctype: 'multipart/form-data',
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        success: function(response) {
            callback(response);
        },
        error: function(response) {
                $.each(response.responseJSON.errors, function (i, error) {
                    let el = $(form).find('[name="'+i+'"]');
                    el.addClass('is-invalid');
                    el.after($('<div class="invalid-feedback">'+error[0]+'</div>'));
                });
            }
        }
    });

Answer 3

[Павел Ловцевич]

Почему бы не использовать браузерное Conctraint Validation API? Тогда выделение невалидная форма будет отлавливаться обычным CSS-селектором:

form:invalid {
   ...
}

Т.к. API неидеальное по своей архитектуре советую использовать через не напрямую, а через библиотеку Bouncer.js. По Costraint Validation API у меня есть доклад-введение в тему. Он немного устарел, но база та же.