Ever Thought of Adding Extra Validations to Your Form?

Have you ever considered adding extra validations to your forms, like providing real-time visual feedback when a user interacts with input fields? For instance, showing a green outline for correct input and a red one for incorrect input. Typically, achieving this involves JavaScript or even React, which can get a bit complex. But what if I told you that you can accomplish this purely with CSS? Yes, I'm not bluffing—it's actually possible!

Creating a Simple Form

Let's start with a simple HTML form:

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" placeholder="Name" minLength="3" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Email" required>

  <label for="password">Password:</label>
  <input type="password" minLength="8" id="password" name="password" placeholder="*******" required>

  <input type="submit" value="Submit">
</form>

In the form above, we have used the required attribute to ensure that fields are not left empty. The minLength attribute is used to enforce a minimum number of characters for the "Name" and "Password" fields. Additionally, you can use the pattern attribute for more complex validations.

Applying CSS for Valid and Invalid States

To style the valid and invalid states of the input fields, we can use the :valid and :invalid pseudo-classes in CSS. Here's how you can do it:

input:valid {
  color: green;
}

input:invalid {
  color: red;
}

However, there is a catch! By default, these pseudo-classes apply their styles as soon as the page loads, meaning they can already indicate whether the input is valid or invalid before user interaction. This isn't always the desired behavior, as we typically want the validation to kick in only after the user starts typing.

Introducing :user-valid and :user-invalid

To solve this, we can use the :user-valid and :user-invalid pseudo-classes:

input:user-valid {
  color: green;
}

input:user-invalid {
  color: red;
}

Unfortunately, these pseudo-classes have limited browser support. So, to ensure broader compatibility, we need a fallback method.

Using :not(:placeholder-shown) for Compatibility

Here's an alternative solution that uses the :not(:placeholder-shown) pseudo-class to achieve more consistent browser support. Ensure your inputs have a visible placeholder attribute, and apply the following CSS:

input:not(:placeholder-shown):valid {
  outline: 2px solid green;
}

input:not(:placeholder-shown):invalid {
  outline: 2px solid red;
}

By using :not(:placeholder-shown) along with :valid and :invalid, you can effectively apply styles only after the user has interacted with the input field, giving you the desired behavior across most modern browsers.

Conclusion

With these CSS techniques, you can easily add interactive, real-time validations to your forms without relying on JavaScript. This approach not only simplifies your codebase but also enhances user experience with immediate feedback. So, go ahead and try it out on your next project!