Hello readers, Today in this blog you'll learn how to Check Email Validation in HTML CSS & JavaScript. Earlier I have shared many Login Form Designs but there are no features of the Email Validation Check. Email Validation is a procedure that verifies if an email address is deliverable and valid. So now it's time to create Fully Validated Email Field in JavaScript.
Today in this blog, I'll share with you this program (Email Validation Check). At first, on the webpage, there are two containers. On the first container, I have entered an invalid email address so there is shown a tooltip with a warning message and with the red border. And, in the second container, I have entered a valid email address so there is shown the submit button and with the green border. As you know, red color indicates an error and green color indicates success.
If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Email Validation Check in HTML CSS & JavaScript).
Video Tutorial of Email Validation Check using JavaScript
If you like this program (Email Validation Check) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. If you're a beginner and you have some knowledge of HTML CSS & JavaScript then you can also create a program like this that checks email validation, password validation, username validation, etc. You can also use this program in your projects and websites.
HTML FILE:
Email Validation Check using JavaScript [Source Codes]
As always, before sharing the codes of this program (Email Validation Check program). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name "content" and placed all other tags inside it. Then I created a <form> and placed a <input> tag inside it. After that, I created a <button>. The <input> tag specifies an input field where the user can enter data. The <input> element is the most important form element.
In the CSS File, first I reset default margins and padding to 0; Then I placed all elements at the center using CSS grid property. After that, I did basic styling to input like I gave height-width, colors, padding, etc. Then I created a tooltip to show an error message and hide it until we entered some char. Similarly, I did basic styling to button as you can see in the video. I got those icons like a warning and a check from Font Awesome.
In the JavaScript File, first I called all required tags/elements using their tag name or class name and store in the different var. I have also stored regular expression validation character or pattern in the var. Then I created onkeydown function. onkeydown event | keydown event. This occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.
Inside this function, I created if/else statement. In the if statement, I wrote a condition that if entered email value matches the pattern then show the submit button and show success otherwise run the else statement. In the else statement, I wrote the codes that triggered an error message and hides the submit button.
To create this program (Email Validation Check). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
CSS FILE:
Please make contact form validation like this one.
ReplyDeleteSure...Stay tuned with us!
DeleteSir my question is 'where from you learn it' its amazing i am your biggest fan
ReplyDeleteplease ans me.
From YouTube, Blogs, and many other sites.
DeletePost a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.