Hello friends, To we are going to learn Email Validation in HTML CSS, and JavaScript. There are various CSS designs that I have created before like Login Form or Sign up Form and Contact Form but to date, I haven't validated the email address. So without further ado let's get started.
Email validation means the process of validating an email to get the right email ID from the user while they going to log in or signup. Mostly an Email validation program is used in the login for registration form.
Let's have a look at the given image of our program [Email Validation in HTML CSS and JavaScript], There are two images inside the image. On the top image, we can see a red border, exclamation sign, and letter with some error text, that undoubtedly shows us that is an invalid email
In the second image we can see the correct email id inside the input field that's why our input field's border is in blue color, tick sign at right, and some message on the bottom, that shows us that the email is valid.
Actually very first that email input field's border color is grey and the email field looks like it is in an inactive condition. When we click or focus on the input field its border-color changes into blue and the input field looks like it is at the active condition
To see the virtual example of this program [Email Validation in HTML CSS and JavaScript], and every code that I have used to make this email validation perfectly work, you have to watch the video tutorial of this email validation in HTML CSS and JavaScript which I have given below:
Email Validation in HTML CSS and JavaScript | Video Tutorial
I have provided all source code files this Email validation in HTML CSS and JavaScript below, but till then let me explain some important topics that we have seen on the video tutorial.
As you have seen on the video tutorial [Email Validation in HTML CSS and JavaScript]. At first, we saw one input field with a grey border, a placeholder with the text enter your email, and a button. When I focused on the input field, its border colors turns into blue.
When I clicked in the check button without entering an email id the input fields border transform into red, one sign, and some error text "email can't be blank" appears with red color. When I entered an invalid email id then all colors and signs are in constant form but the error text changes into "please enter a valid email".
But, the last time when I entered a valid email border changes into blue color, the error sign in to tick sign, and the error text changes to "this is a valid email" with blue color. These all color combination, text and sign helps to find out the valid email address. I have used regular expression [regex] pattern to validate this email perfectly
I hope now you have understood all concepts and code behind creating this simple email validation in javascript, and I assume that you can easily build this type of email validation. If you are feeling difficulties to make this program then you can take all source code of this email validation form below, you can also download all source code files.
You Might Like This
- Login Form with icons
- Login and Registration Form
- Responsive Registration Form
- Login Form with label up animation
Email Validation in HTML CSS and JavaScript [Source Code]
To take all HTML CSS and JavaScript code of this program [Email Validation in HTML CSS and JavaScript] from, but at first, you need to create three files one is HTML file another is CSS file and the last one is JavaScript file. After creating these three files, you can copy-paste all codes in your document. You can also download all source code files by clicking on the given download button.
To get the HTML code of this email validation, create a file on your computer with the name of index.html and copy-paste the given HTML code in your document.
HTML CODE:
CSS CODE: