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 using this makes them appear highlighted right when the page loads. It seems unfriendly to give this kind of warning to the user before even giving him the chance to fill them at least once.

Is there a way that these fields appear highlighted only after trying to submit the form, said in another way, is there a way to run the validation only after clicking submit (or at least losing focus on the required input fields?)

Answer 1

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

HTML:

<form>   <input type="email" required placeholder="Email Address">   <input type="password" required placeholder="Password">   <input type="submit" value="Sign in"> </form> 

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 <form> as the submit button     $(this)         .closest('form')         .find('[required]')         .addClass('required'); });