Kode Pundit Kode Pundit
  • Home
  • Blog
  • Contact Us
Kode Pundit Kode Pundit
Kode Pundit Kode Pundit
  • Home
  • Blog
  • Contact Us
CCSS3

Form validation in CSS and HTML

  • byAkash Bilung
  • September 16, 2022
  • 3 minute read
0
Shares
0
0
0
0

Forms are the most essential part of any website. A great-looking form with seamless transition provides a better user experience and makes it fun to fill the form. Sometimes we stumble upon a situation where we might need to validate the form using CSS.

Gladly, CSS has grown a lot in the past few years and is capable of doing amazing kinds of stuff, without using any form validation in JavaScript. However, it involves a bit of trickery and interestingly today we are going to use one of them to do the form validation in CSS and HTML.

But before moving further I’d recommend you to go through this article How to make a Floating label and when you should use it. As a floating label is going to be the most integral part of completing this tutorial, where I will also show one of the CSS form validation examples.

Table of Contents
  1. How does the form validation in CSS and HTML work?
  2. HTML markup
  3. CSS validation error
  4. Validate the form using CSS
  5. Conclusion

How does the form validation in CSS and HTML work?

The latest CSS3 now gives us :valid and :invalidselectors. The :valid selector selects form elements with a value that validates according to the element’s semantics. And the :invalid selector selects form elements with a value that does not validate according to the element’s semantics. For example, an input of an email type with a value of 35424 is invalid, but care@learnweb.academy is valid ( Figure-1 ).

Valid and invalid selectors Info graphic
Figure-1

So that’s what we’re going to use to verify if the user entered the correct value. And if it’s going to be invalid we will make the error appear and the label disappear ( Figure-2 ).

But it’s important to note that it has some restrictions, it will only work on input elements with min and max attributes, email fields, or number fields with a numeric value, etc. and all of them must be required. So without further ado, let’s begin and validate the form using CSS.

HTML markup

The markup is similar to the one we saw in the article mentioned above, where we saw the form validation in HTML. The only thing that is going to be new is the <div class="error">, which will act as our alert if we fill in something invalid.

<div class="input-text">
    <input type="email" placeholder="Enter Email" required>
    <label for=""> Enter Email</label>
    <div class="error"> Please enter a valid email address!</div>
</div>

CSS validation error

Unlike the floating label, our error will be at the bottom of the input field (Figure 2).

/** Error */
.error {
    position: absolute;
    top: 0;
    z-index: 50;
    padding: 10px;
    width: 100%;
    font-size: 13px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s all ease;
}
 
/** Error Arrow */
.error::after {
    content: '';
    position: absolute;
    height: 8px;
    width: 8px;
    top: -4px;
    left: 10px;
    transform: rotate(45deg);
}
 
/** Error Background */
.error-danger,
.error-danger::after {
    background: #ee4540;
}
Form validation in CSS and HTML
Figure 2

Validate the form using CSS

Now, this is going to be the fun part. Here we will be combining :invalid, :not() and :placeholder-shown CSS selectors. So technically if the value of the input is invalid and not showing the placeholder then we will have to run the condition. But since the error div is not an adjacent sibling of input, we will use a general sibling selector ( ~ ).

/** Hide the label if invalid */ 
.input-text > input:invalid:not(:placeholder-shown) + label {
    top: 11px;
    opacity: 0;
    visibility: hidden;
}
 
/** Show the error if invalid */  
.input-text > input:invalid:not(:placeholder-shown) ~ .error {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

And that’s it. We are ready to validate the form using CSS. To check out the demo click here.

Conclusion

If you found this post helpful, I would be very grateful if you would help it to spread by emailing it to a friend or sharing it on Twitter or Facebook. Thank you!

Please let me know if you have any questions in the comments.

Photo Credits: Featured Photo by Brooke Lark on Unsplash

  • Tags:
  • CSS3 Tips & Tricks
  • CSS3 Tutorial
  • Form Validation
  • HTML Validation
  • HTML5
  • Sign up Form
0 Shares:
Share 0
Tweet 0
Pin it 0
Akash Bilung

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

— Previous article

The Basics of Github

Subscribe to Our Newsletter

Get notified of the awesome tips & tricks on our web development.

Kode Pundit Kode Pundit
Copyright 2022. All rights reserved.