How to Validated Email, Password
with HTML,CSS and JavaScript
Email and Secret word Approval implies the method involved with checking the email address and the strength of the secret key the client has input. Also, the secret phrase show conceal implies appearing and concealing the secret phrase while tapping on the symbol for security purposes. Have a brief glance at the given picture of our venture Email and Secret word Approval. On the left side structure, you can see three information clear info fields and one button. On another right-side structure, you can see I have filled in a few invalid information, that is the reason there is some red-shaded message with a mistake message.
As a matter of fact when we put erroneous information on the information field or straightforwardly click on the button then those mistakes show up with a blunder message. On the secret phrase field, on the right side, we can see the eye symbol. At the point when we click on the symbol, it assists us with showing the characters that we filled. The affirm secret phrase field will check the made secret word and the affirmed secret phrase is coordinating or not.
Validate Email, Password with HTML,CSS and JavaScript | Video Tutorial
Validate Email and Password [Source Codes]
To make a Validate Email and Password Form follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Email and Password Validation</title>
- <link rel="stylesheet" href="style.css">
- <link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet">
- </head>
- <body>
- <div class="container">
- <header>Create Account</header>
- <form action="#">
- <div class="name">
- <div class="input-field">
- <input type="text" placeholder="Enter your First Name" class="name" required>
- </div>
- <div class="input-field">
- <input type="text" placeholder="Enter your Last Name" class="last-name" required>
- </div>
- </div>
- <div class="field email-field">
- <div class="input-field">
- <input type="email" placeholder="Enter your Email" class="email">
- </div>
- <span class="error email-error">
- <i class="bx bx-error-circle error-icon"></i>
- <p class="error-text">Please enter a valid email</p>
- </span>
- </div>
- <div class="field create-password">
- <div class="input-field">
- <input type="password"
- placeholder="Password"
- class="password">
- <i class="bx bx-hide show-hide"></i>
- </div>
- <span class="error password-error">
- <i class="bx bx-error-circle error-icon"></i>
- <p class="error-text">
- Please enter atleast 8 charatcer with mix number, symbol, small and
- capital letter.
- </p>
- </span>
- </div>
- <div class="field confirm-password">
- <div class="input-field">
- <input
- type="password"
- placeholder="Confirm password"
- class="cPassword">
- <i class="bx bx-hide show-hide"></i>
- </div>
- <span class="error cPassword-error">
- <i class="bx bx-error-circle error-icon"></i>
- <p class="error-text">Password don't match</p>
- </span>
- </div>
- <div class="input-field button">
- <input type="submit" value="Submit">
- </div>
- </form>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- background-image: linear-gradient(to bottom right, #62B8B0, #488E92, #509C98);
- margin: 0;
- font-family: Arial, sans-serif;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
- .container {
- position: relative;
- max-width: 500px;
- height: auto;
- width: 100%;
- padding: 25px;
- border-radius: 8px;
- background-color: #f2f2f2;
- }
- .container header {
- font-size: 22px;
- font-weight: 600;
- color: #333;
- text-align: center;
- }
- .container form {
- margin-top: 30px;
- }
- .name{display: flex;
- margin-bottom: 20px;
- width: 450px;
- justify-content:space-between;
- }
- .last-name{
- margin-left: 4px;
- }
- form .field {
- margin-bottom: 20px;
- }
- form .input-field {
- position: relative;
- height: 55px;
- width: 100%;
- }
- .input-field input {
- height: 100%;
- width: 100%;
- outline: none;
- border: none;
- border-radius: 8px;
- padding: 0 15px;
- border: 1px solid #d1d1d1;
- }
- .invalid input {
- border-color: #d93025;
- }
- .input-field .show-hide {
- position: absolute;
- right: 13px;
- top: 50%;
- transform: translateY(-50%);
- font-size: 18px;
- color: #919191;
- cursor: pointer;
- padding: 3px;
- }
- .field .error {
- display: flex;
- align-items: center;
- margin-top: 6px;
- color: #d93025;
- font-size: 13px;
- display: none;
- }
- .invalid .error {
- display: flex;
- }
- .error .error-icon {
- margin-right: 6px;
- font-size: 15px;
- }
- .create-password .error {
- align-items: flex-start;
- }
- .create-password .error-icon {
- margin-top: 4px;
- }
- .button {
- margin: 25px 0 6px;
- }
- .button input {
- color: #fff;
- font-size: 16px;
- font-weight: 400;
- background-color: #4070f4;
- cursor: pointer;
- transition: all 0.3s ease;
- }
- .button input:hover {
- background-color: #0e4bf1;
- }
-
Now paste the following codes into your script.js file
- const form = document.querySelector("form"),
- emailField = form.querySelector(".email-field"),
- emailInput = emailField.querySelector(".email"),
- passField = form.querySelector(".create-password"),
- passInput = passField.querySelector(".password"),
- cPassField = form.querySelector(".confirm-password"),
- cPassInput = cPassField.querySelector(".cPassword");
-
- // Email Validtion
- function checkEmail() {
- const emaiPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
- if (!emailInput.value.match(emaiPattern)) {
- return emailField.classList.add("invalid");
- }
- emailField.classList.remove("invalid");
- }
-
- // Hide and show password
- const eyeIcons = document.querySelectorAll(".show-hide");
-
- eyeIcons.forEach((eyeIcon) => {
- eyeIcon.addEventListener("click", () => {
- const pInput = eyeIcon.parentElement.querySelector("input");
- if (pInput.type === "password") {
- eyeIcon.classList.replace("bx-hide", "bx-show");
- return (pInput.type = "text");
- }
- eyeIcon.classList.replace("bx-show", "bx-hide");
- pInput.type = "password";
- });
- });
-
- // Password Validation
- function createPass() {
- const passPattern =
- /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
-
- if (!passInput.value.match(passPattern)) {
- return passField.classList.add("invalid");
- }
- passField.classList.remove("invalid");
- }
-
- // Confirm Password Validtion
- function confirmPass() {
- if (passInput.value !== cPassInput.value || cPassInput.value === "") {
- return cPassField.classList.add("invalid");
- }
- cPassField.classList.remove("invalid");
- }
-
- // Calling Funtion on Form Sumbit
- form.addEventListener("submit", (e) => {
- e.preventDefault(); //preventing form submitting
- checkEmail();
- createPass();
- confirmPass();
-
- //calling function on key up
- emailInput.addEventListener("keyup", checkEmail);
- passInput.addEventListener("keyup", createPass);
- cPassInput.addEventListener("keyup", confirmPass);
-
- if (
- !emailField.classList.contains("invalid") &&
- !passField.classList.contains("invalid") &&
- !cPassField.classList.contains("invalid")
- ) {
- location.href = form.getAttribute("action");
- }
- });
-
If you face any difficulties while creating your Validate Email and Password Form or your code is not working as expected, you can download the source code files for this Card for free by clicking on the download button.