How to Validate Email & Password in HTML CSS JavaScript
byNiodTech-
Hello friend, I hope you are doing and creating creative pieces of stuff. Today in this blog, you will learn How to Validate Email & Password in HTML CSS JavaScript. Although, I have a separate blog about Email Validation, Password Validation, and Password Show Hide, this time I'm going to add all these sections in one form.
Email and Password Validation means the process of verifying the email address and the strength of the password the user has input. And, the password show hide means the showing and hiding password while clicking on the icon for the security purpose.
Have a quick look at the given image of our project Email and Password Validation. On the left side form, you can see three input blank input fields and one button. On another right-side form, you can see I have filled some invalid data, that's why there is some red-colored text with an error message.
Actually when we put inaccurate data on the input field or directly click on the button then those errors appear with an error message. On the password field, on the right side, we can see the eye icon. When we click on the icon, it helps us to show the characters that we filled. The confirm password field will check the created password and the confirmed password is matching or not.
Rather than theoretically, I would highly recommend you to watch the given video tutorial of our project [How to Validate Email & Password in HTML CSS JavaScript], in that video, I have shown a demo of this project and all the HTML CSS & JavaScript code that I have used to validate this email and password and offcourse password show and hide feature.
Email and Password Validation in HTML CSS & JavaScript
I have provided all the HTML CSS & JavaScript code that I have used to Validate Email, Password, and Show/Hide passwords. Before getting into the source code file, Let me explain the given video tutorial on this form validation briefly.
As you have seen in the video tutorial. At first, there was a signup form with three empty input fields and a button. When I clicked on the button without filling in the required date, the red error message appeared. After that when I started to enter my valid data the error message disappeared. Also we could show and hide passwords by clicking on the eye icon. The email required proper valid email formation and the create password field needs the combination of numbers, special symbols, capital, and small letter. Basically, we need not put eight characters with mixing all those characters.
To make this sign-up form I have used HTML and CSS to validate the form and to show and hide the password, I have used some JavaScript code.
I accept, now you can create this type of form and validate email and password using HTML CSS and JavaScript, also show and hide password while clicking on the eye icon with changing icon. If you are feeling complicated, I have provided all the HTML CSS, and JavaScript code below.
To get the following HTML CSS and JavaScript code for the Email & Password Validation, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.
