Validation in HTML5. :invalid classe after submit

Question

I\'m building a form and I want to use the :invalid selector to give the \"required\" input fields a red border if the user presses submit without filling them, but

Answer 1

I used this approach for a project of mine, so the invalid fields would be highlighted only after submit:

HTML:

CSS:

input.required:invalid {
    color: red;
}

JS (jQuery):

$('[type="submit"]').on('click', function () {
    // this adds 'required' class to all the required inputs under the same 
 as the submit button
    $(this)
        .closest('form')
        .find('[required]')
        .addClass('required');
});