Delay HTML5 :invalid pseudo-class until the first event

html

responsive-design

best-practices

form-validation

byNikita Barsukov·Jan 22, 2025

To activate :invalid styles post-interaction, use JavaScript to append a class to the input field upon a specific event, say blur or input.

// Adding funny class names makes debugging lighten up a bit.
document.querySelector('input').addEventListener('blur', function() {
  this.classList.add('touched'); // The spear of destiny!
});

Then, in your CSS, style the inputs only when the appended class is present:

input:invalid.touched { // Our spear and the Dragon!
  // your desired invalid styles go here
}

Our well-honed spear only strikes its target after the user moves away (blurs) from the input field for the very first time, avoiding immediate error feedback while they are still typing.

Delay the validation indication

By using :not(:focus):invalid, you can hold off the validation message until the user moves to the next field. It's like saying, "Hold your horses! Let's not be too quick to judge!"

input:not(:focus):required:invalid {
  // your stylish invalid styles here
}

Just-in-time validation

If you want to pop a flag right when the user begins to type, :not(:placeholder-shown):invalid is your new best friend. The placeholder acts as a magical charm, preventing errors from being flagged.

input:not(:placeholder-shown):required:invalid {
  // pop goes the weasel!
}

Nuanced interaction

Add a touch of class (literally, a '.touched' class) to your input fields upon certain events. JavaScript event listeners can help make your forms attuned to different user interactions.

// Listening to tales of user events
['blur', 'input', 'change'].forEach(event => {
  document.querySelector('input').addEventListener(event, function() {
    this.classList.add('touched'); // You got the Midas touch!
  });
});

This class then adds flavor to your CSS:

input:invalid.touched {
  // invalid never looked so good!
}

Accessible and friendly UX

Go beyond aesthetic appeal and make sure each of your visual cues is also accessible to all users. Provide comprehensive instructions and indulge in ARIA attributes and roles.

Cross-browser consistency

Browsers are like people, unique and quirky. So, consider using browser-specific pseudoclasses, such as :-moz-ui-invalid for Firefox. Make your forms not just functional, but stylishly uniform across different platforms.

Thinking ahead: Upcoming standards

Embrace the future, eye the experimental :user-invalid pseudo-class, part of the Selectors Level 4 specification. It's like being an early bird that gets the tasty worms of form validation!

Fine-tune with HTML5 input types and submit button

By using specific HTML5 input types like email, password, etc., you can leverage the built-in browser validation, and enjoy the perks of tailored onscreen keyboards on mobile devices. Yes, your submit button too plays a crucial role in triggering validation.

Perfecting UX across devices and platforms

Cater to the diversity in user input methods including touch, keyboard, and assistive technologies. This inclusive form validation enriches user experience.