How to highlight invalid form fields?

Question

css

Nothing to add to the title of the question. There is an assumption that you can add a class to empty or incorrectly filled fields and hang styles on the class.
Question: how to do it?
Form code below:

Answer 1

Just search the MDN site. All approaches are consecrated there, at least with this case
https://developer.mozilla.org/en/docs/Learn/HTML/F...

Answer 2

Here is an example with boostrapom ajax. ajax returns wrong names

$.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

Why not use the browser's Contraint Validation API? Then the selection of an invalid form will be caught by the usual CSS selector:

form:invalid {
   ...
}

Because I advise you to use the API, which is not ideal in its architecture, through not directly, but through the Bouncer.js library . On the Costraint Validation API, I have an introduction to the topic. It's a little outdated, but the base is the same.