Form Validation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Fri, 26 May 2023 13:34:30 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 How to Implement Form Validation in HTML CSS and JavaScript https://www.codingnepalweb.com/implement-form-validation-html-javascript/ https://www.codingnepalweb.com/implement-form-validation-html-javascript/#respond Thu, 25 May 2023 10:08:50 +0000 https://www.codingnepalweb.com/?p=5492 How to Implement Form Validation in HTML CSS and JavaScript

Forms play a crucial role in web development, allowing users to input and submit their data. However, ensuring the accuracy and integrity of the data is essential. This is where form validation comes into play.

Form validation involves ensuring that the data entered by users in a form meets specific criteria and is valid. Its primary purpose is to prevent the submission of incomplete or invalid data.

This blog post is designed to guide beginner web developers through the process of form validation using HTML, CSS, and JavaScript. You will start from scratch, learning how to create a responsive form using HTML and CSS. Then, we will dive into the world of form validation and explore how to apply it effectively using JavaScript.

Additionally, you’ll also learn how to show or hide password visibility on the toggle button click. To see a live demo of this form validation in action, scroll to the bottom of this page and click on the View Live Demo button.

Steps For Creating Form Validation in HTML

To create a form and do the validation using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create an thank-you.html file. The file name must be index and its extension .html
  4. Create a style.css file. The file name must be style and its extension .css
  5. Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic form layout: This form includes full name, email, password, date of birth, and gender fields, but you can add or remove fields as desired.

<!DOCTYPE html>
<!-- Website - www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation in HTML | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link For Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
  </head>
  <body>
    <form action="thank-you.html">
      <h2>Form Validation</h2>
      <div class="form-group fullname">
        <label for="fullname">Full Name</label>
        <input type="text" id="fullname" placeholder="Enter your full name">
      </div>
      <div class="form-group email">
        <label for="email">Email Address</label>
        <input type="text" id="email" placeholder="Enter your email address">
      </div>
      <div class="form-group password">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter your password">
        <i id="pass-toggle-btn" class="fa-solid fa-eye"></i>
      </div>
      <div class="form-group date">
        <label for="date">Birth Date</label>
        <input type="date" id="date" placeholder="Select your date">
      </div>
      <div class="form-group gender">
        <label for="gender">Gender</label>
        <select id="gender">
          <option value="" selected disabled>Select your gender</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
          <option value="Other">Other</option>
        </select>
      </div>
      <div class="form-group submit-btn">
        <input type="submit" value="Submit">
      </div>
    </form>

    <script src="script.js"></script>
  </body>
</html>

Next, add the following HTML codes to your thank-you.html file: When the user fills out the form with valid data, they will be redirected to this HTML page. This page includes only a heading that says, “Thank you for filling out the form correctly.”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thanks page</title>
</head>
<body>
    <h1>Thank you for filling out the form correctly.</h1>
</body>
</html>

Next, add the following CSS codes to your style.css file to style the form and make it responsive and beautiful. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  min-height: 100vh;
  background: #1BB295;
}

form {
  padding: 25px;
  background: #fff;
  max-width: 500px;
  width: 100%;
  border-radius: 7px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

form h2 {
  font-size: 27px;
  text-align: center;
  margin: 0px 0 30px;
}

form .form-group {
  margin-bottom: 15px;
  position: relative;
}

form label {
  display: block;
  font-size: 15px;
  margin-bottom: 7px;
}

form input,
form select {
  height: 45px;
  padding: 10px;
  width: 100%;
  font-size: 15px;
  outline: none;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #bfbfbf;
}

form input:focus,
form select:focus {
  border-color: #9a9a9a;
}

form input.error,
form select.error {
  border-color: #f91919;
  background: #f9f0f1;
}

form small {
  font-size: 14px;
  margin-top: 5px;
  display: block;
  color: #f91919;
}

form .password i {
  position: absolute;
  right: 0px;
  height: 45px;
  top: 28px;
  font-size: 13px;
  line-height: 45px;
  width: 45px;
  cursor: pointer;
  color: #939393;
  text-align: center;
}

.submit-btn {
  margin-top: 30px;
}

.submit-btn input {
  color: white;
  border: none;
  height: auto;
  font-size: 16px;
  padding: 13px 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  background: #1BB295;
  transition: 0.2s ease;
}

.submit-btn input:hover {
  background: #179b81;
}

Finally, add the following JavaScript code to your script.js file to enable form validation, display appropriate error messages, and implement the toggle functionality for password visibility.

// Selecting form and input elements
const form = document.querySelector("form");
const passwordInput = document.getElementById("password");
const passToggleBtn = document.getElementById("pass-toggle-btn");

// Function to display error messages
const showError = (field, errorText) => {
    field.classList.add("error");
    const errorElement = document.createElement("small");
    errorElement.classList.add("error-text");
    errorElement.innerText = errorText;
    field.closest(".form-group").appendChild(errorElement);
}

// Function to handle form submission
const handleFormData = (e) => {
    e.preventDefault();

    // Retrieving input elements
    const fullnameInput = document.getElementById("fullname");
    const emailInput = document.getElementById("email");
    const dateInput = document.getElementById("date");
    const genderInput = document.getElementById("gender");

    // Getting trimmed values from input fields
    const fullname = fullnameInput.value.trim();
    const email = emailInput.value.trim();
    const password = passwordInput.value.trim();
    const date = dateInput.value;
    const gender = genderInput.value;

    // Regular expression pattern for email validation
    const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

    // Clearing previous error messages
    document.querySelectorAll(".form-group .error").forEach(field => field.classList.remove("error"));
    document.querySelectorAll(".error-text").forEach(errorText => errorText.remove());

    // Performing validation checks
    if (fullname === "") {
        showError(fullnameInput, "Enter your full name");
    }
    if (!emailPattern.test(email)) {
        showError(emailInput, "Enter a valid email address");
    }
    if (password === "") {
        showError(passwordInput, "Enter your password");
    }
    if (date === "") {
        showError(dateInput, "Select your date of birth");
    }
    if (gender === "") {
        showError(genderInput, "Select your gender");
    }

    // Checking for any remaining errors before form submission
    const errorInputs = document.querySelectorAll(".form-group .error");
    if (errorInputs.length > 0) return;

    // Submitting the form
    form.submit();
}

// Toggling password visibility
passToggleBtn.addEventListener('click', () => {
    passToggleBtn.className = passwordInput.type === "password" ? "fa-solid fa-eye-slash" : "fa-solid fa-eye";
    passwordInput.type = passwordInput.type === "password" ? "text" : "password";
});

// Handling form submission event
form.addEventListener("submit", handleFormData);

Conclusion and Final Words

In conclusion, we started creating the structure of the form using HTML, defining the necessary input fields and their attributes. Then, we used CSS to apply styles to elements such as form fields, labels, and buttons. And last, we used JavaScript to implement form validation logic to ensure that users input valid data.

By following the instructions in this blog post, you should now have a functional form with validation features. For further enhancement of your web development skills, I encourage you to explore and experiment with the various types of forms and form validations provided on this website.

If you encounter any difficulties while creating your form or your code is not working as expected, you can download the source code files for this form for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

]]> https://www.codingnepalweb.com/implement-form-validation-html-javascript/feed/ 0 Password Validation Check in HTML CSS & JavaScript https://www.codingnepalweb.com/password-validation-check-html-javascript/ https://www.codingnepalweb.com/password-validation-check-html-javascript/#respond Tue, 18 Apr 2023 08:38:10 +0000 https://www.codingnepalweb.com/?p=4085 Password Validation Check in HTML CSS & JavaScript Password Strength Check in JavaScript

In today’s digital world, it is important to create strong and secure passwords that are difficult to guess or hack. This is where password validation or strength checks come into play. By implementing this password validation feature, website owners can ensure that users create strong passwords that are less likely to be compromised.

In this blog post, you’ll learn how to do Password Validation Check in HTML, CSS, and JavaScript. Password validation check is a feature that checks if the entered password meets the minimum requirements. This can include a minimum length of 8 characters, at least one uppercase letter, one special character, and more.

In this post, you’ll not only learn how to perform a password validation check, but you’ll also learn how to implement a handy eye icon that toggles password visibility. With this feature, users can easily show or hide their passwords as they enter them.

If you’re excited to see a live demo of this password validation check, click here to check it out. For a full video tutorial on password validation or strength check using HTML, CSS, and JavaScript, you can watch the given YouTube video.

Video Tutorial of Password Validation Check in JavaScript

 
If you prefer visual learning, then the above video tutorial is a great resource for you. I highly recommend watching it because I go through each line of code in detail and provide explanatory comments to make the code easy to understand and follow.

But if you prefer reading blog posts or want a quick summary of the steps involved in creating a password validation, you can continue reading this post. By the end of this post, you will have a good understanding of how to do a password validation check and toggle password visibility on click with HTML, CSS, and JavaScript.

Steps To Do Password Validation Check in JavaScript

To create a password validation check feature using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the password validation. Keep in mind that if you decide to change the order of the requirements in your password validation checklist, you will need to make some corresponding changes to the JavaScript code as well.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Password Validation Check | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Fontawesome Link for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="pass-field">
        <input type="password" placeholder="Create password">
        <i class="fa-solid fa-eye"></i>
      </div>
      <div class="content">
        <p>Password must contains</p>
        <ul class="requirement-list">
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 8 characters length</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 number (0...9)</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 lowercase letter (a...z)</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 special symbol (!...$)</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 uppercase letter (A...Z)</span>
          </li>
        </ul>
      </div>
    </div>

  </body>
</html>

Next, add the following CSS codes to your style.css file to give a basic look and feel to the password validation checklist and password input. If you wish, you can customize it to your liking by changing the color, font, size, and other CSS properties in the file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4285F4;
}
.wrapper {
  width: 450px;
  overflow: hidden;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
.wrapper .pass-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.pass-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.pass-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285F4;
}
.pass-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}
.wrapper .content {
  margin: 20px 0 10px;
}
.content p {
  color: #333;
  font-size: 1.3rem;
}
.content .requirement-list {
  margin-top: 20px;
}
.requirement-list li {
  font-size: 1.3rem;
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.requirement-list li i {
  width: 20px;
  color: #aaa;
  font-size: 0.6rem;
}
.requirement-list li.valid i {
  font-size: 1.2rem;
  color: #4285F4;
}
.requirement-list li span {
  margin-left: 12px;
  color: #333;
}
.requirement-list li.valid span {
  color: #999;
}

@media screen and (max-width: 500px) {
  body, .wrapper {
    padding: 15px;
  }
  .wrapper .pass-field {
    height: 55px;
  }
  .pass-field input, .content p  {
    font-size: 1.15rem;
  }
  .pass-field i, .requirement-list li {
    font-size: 1.1rem;
  }
  .requirement-list li span {
    margin-left: 7px;
  }
}

Finally, add the following JavaScript code to your script.js file to add functionality for toggling password visibility and checking the user-entered password against the requirements you have specified in your password validation checklist.

const passwordInput = document.querySelector(".pass-field input");
const eyeIcon = document.querySelector(".pass-field i");
const requirementList = document.querySelectorAll(".requirement-list li");

// An array of password requirements with corresponding 
// regular expressions and index of the requirement list item
const requirements = [
    { regex: /.{8,}/, index: 0 }, // Minimum of 8 characters
    { regex: /[0-9]/, index: 1 }, // At least one number
    { regex: /[a-z]/, index: 2 }, // At least one lowercase letter
    { regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character
    { regex: /[A-Z]/, index: 4 }, // At least one uppercase letter
]

passwordInput.addEventListener("keyup", (e) => {
    requirements.forEach(item => {
        // Check if the password matches the requirement regex
        const isValid = item.regex.test(e.target.value);
        const requirementItem = requirementList[item.index];

        // Updating class and icon of requirement item if requirement matched or not
        if (isValid) {
            requirementItem.classList.add("valid");
            requirementItem.firstElementChild.className = "fa-solid fa-check";
        } else {
            requirementItem.classList.remove("valid");
            requirementItem.firstElementChild.className = "fa-solid fa-circle";
        }
    });
});

eyeIcon.addEventListener("click", () => {
    // Toggle the password input type between "password" and "text"
    passwordInput.type = passwordInput.type === "password" ? "text" : "password";

    // Update the eye icon class based on the password input type
    eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
});

I have added comments to each line of code in the JavaScript snippet to make it easy to understand and follow along. If you have any questions or need further clarification, please feel free to leave a comment below and I will do my best to help you out.

Conclusion and Final Words

In this blog post, I have covered how to implement a password validation check using HTML, CSS, and JavaScript. This includes creating a password checklist, adding the necessary HTML elements to the form, styling the elements using CSS, and adding JavaScript code to validate the password and toggle password visibility.

By following the step-by-step guide and the provided code, you should be able to easily add these features to your login or signup forms as needed.

In addition, I’ve covered web development concepts such as DOM manipulation, event handling, objects, CSS styling, and more. By understanding these concepts, you can not only create password validation checks but also apply them to other web development projects.

If you encounter any problems or your code is not working as expected, you can download the source code files for this password validation for free. Click on the download button to get the zip file containing the project folder with source code files.

 

]]> https://www.codingnepalweb.com/password-validation-check-html-javascript/feed/ 0 How to Validate Email & Password in HTML CSS JavaScript https://www.codingnepalweb.com/javascript-email-password-validation/ https://www.codingnepalweb.com/javascript-email-password-validation/#respond Wed, 17 Aug 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4164 How to Validate Email & Password in HTML CSS JavaScript

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 showing and hiding the password while clicking on the icon for security purposes.

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 in 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 of course 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, a 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 by 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, and also show and hide passwords 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.

You Might Like This:

Email & Password Validation [Source Code]

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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email and Password Validation</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Boxicons CSS -->
    <link
      href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <header>Signup</header>
      <form action="https://www.codinglabweb.com/">
        <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="Create 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 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 Now" />
        </div>
      </form>
    </div>

    <!-- JavaScript -->
   <script src="js/script.js"></script>
  </body>
</html>


/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.container {
  position: relative;
  max-width: 370px;
  width: 100%;
  padding: 25px;
  border-radius: 8px;
  background-color: #fff;
}
.container header {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.container form {
  margin-top: 30px;
}
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;
}

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"); //adding invalid class if email value do not mathced with email pattern
  }
  emailField.classList.remove("invalid"); //removing invalid class if email value matched with emaiPattern
}

// Hide and show password
const eyeIcons = document.querySelectorAll(".show-hide");

eyeIcons.forEach((eyeIcon) => {
  eyeIcon.addEventListener("click", () => {
    const pInput = eyeIcon.parentElement.querySelector("input"); //getting parent element of eye icon and selecting the password 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"); //adding invalid class if password input value do not match with passPattern
  }
  passField.classList.remove("invalid"); //removing invalid class if password input value matched with passPattern
}

// 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 Form Validation or your code is not working as expected, you can download the source code files for this Email Password Validation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/javascript-email-password-validation/feed/ 0 How to Validate Email in HTML CSS & JavaScript | Email Checker https://www.codingnepalweb.com/create-email-checker-javascript/ https://www.codingnepalweb.com/create-email-checker-javascript/#respond Wed, 10 Aug 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4165 How to Validate Email in HTML CSS & JavaScript | Email Checker

Hello friend, I hope you are doing and creating awesome projects. Today in this blog you will learn to Validate an Email Address in HTML CSS and JavaScript. There are lots of validation projects that you can found on this blog like Email Validation, password, and confirm password validation.

An Email Validation means authenticating the email address that the user filled. You can see on the apps of the website where a login or signup form available and we need to enter our email address and password to register. For such things, a valid email address is needed.

Let’s have a quick look at the given image of our project [How to Validate Email Address]. On the image, you can see three input fields with text and icons. On the first input email field, we can see it is empty, on the second input email field, we can see an invalid email that’s why the icon color is red and on the third input email field, we can see a valid email that’s why the color of the icon is green and check icon. The color icons will automatically while you are typing the email.

You can watch the real demo of this email checker by watching the given video tutorial. Also by watching the given video tutorial, you will get the idea of how all HTML CSS, and JavaScript code are working behind this email validator.

Validate Email Address in JavaScript | Email Checker

I have provided all the HTML CSS and JavaScript code that I have used to create this Email Checker. Before getting into the source code file, I would like to explain the given video tutorial of email validators briefly.

As you have seen in the video tutorial on Email verifiers. At first, there was an empty input email field with grey colored icon, when I started to type my email the icon changed to red color and when I completed my email address with a valid email address, the icon colored change to green with a check icon.

To make the UI design of the input field I have used HTML and CSS only to validate the email address and change the color of the icon and icon, I have used some JavaScript Code, and to validate the email address I have used some regex pattern.

I hope, now you can create this Email Checker using HTML CSS, and JavaScript, if you are feeling difficulty validating the email address, I have provided all the source code below.

You Might Like This:

Email Checker [Source Code]

To get the following HTML and CSS code for the Email Checker you need to create two files one is an HTML file and another is a CSS file. After creating these two 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JavaScript Email Vaidation</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Unicons CSS -->
    <link
      rel="stylesheet"
      href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
    />
  </head>
  <body>
    <div class="input-field">
      <input type="email" placeholder="Enter your email" spellcheck="false"/>
      <i class="uil uil-envelope email-icon"></i>
    </div>

    <!-- JavaScript -->
    <script>
      const input = document.querySelector("input"),
            emailIcon = document.querySelector(".email-icon")

            input.addEventListener("keyup", () =>{
              let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

              if(input.value === ""){
                emailIcon.classList.replace("uil-check-circle", "uil-envelope");
                return emailIcon.style.color = "#b4b4b4";
              }
              if(input.value.match(pattern)){
                emailIcon.classList.replace("uil-envelope", "uil-check-circle");
                return emailIcon.style.color = "#4bb543"
              }
              emailIcon.classList.replace("uil-check-circle", "uil-envelope");
              emailIcon.style.color = "#de0611"
            })
    </script>
  </body>
</html>


/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
}
.input-field {
  position: relative;
  height: 50px;
  width: 280px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-field input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 6px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
}
input::placeholder {
  color: #b4b4b4;
}
.input-field .email-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #b4b4b4;
}

If you face any difficulties while creating your Valid Email Checker or your code is not working as expected, you can download the source code files for this Valid Email Checker for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/create-email-checker-javascript/feed/ 0 Show & Hide Password in HTML CSS & JavaScript https://www.codingnepalweb.com/show-hide-password-html-css-javascript/ https://www.codingnepalweb.com/show-hide-password-html-css-javascript/#respond Sun, 06 Mar 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4186 Show & Hide Password in HTML CSS & JavaScript

Hello friend, I hope you are doing well. Today you are going to learn how to show and hide passwords in the input field by clicking on the toggle using HTML CSS and JavaScript. There are lots of Login Forms I have created with different animations and features. But many of you have requested me to create input filed label up animation and toggling password visibility, so here we go.

As a definition, password show and hide mean showing or hiding the letter of the passwords by clicking on the toggle button. This type of feature is mostly added to the form for security purposes because many users do not want to show their passwords to those who are around them.

Let’s have a look at the given image of our project [how to show and hide password], as you can see on the given image. On the first input field you can see we can’t see the letter and eye icon is in hiding condition and on the second password field we can see the letter of password clearly and the eye icon is in show condition.

You can watch the real demo of this project [toggle to show and hide password], and all the HTML CSS, and JavaScript code that I have used to create this project. By watching the full video tutorial you will know how all codes are working behind this project.

Show & Hide Password in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this project [Show and hide password], before jumping into the source code file you need to know some important points out of this video tutorial.

As you have seen in the video tutorial, At first we can see a password field with a grey border and eye icon, when I focused on the password field password text moved upward, border and eye icon color changed into the blue with the beautiful animation. To make this animation I have used only HTML CSS. After that, I typed some letters which are not visible and when I clicked on the eye icon password was visible and also eye icon changed at the same time, to make these changes I have used some JavaScript code.

I hope, now you can make this project [Show and Hide Password] easily. If you are feeling difficulty building this project, I have provided all the source code below.

You Might Like This:

Show and Hide Password [Source Code]

To take the source code of this Login and Registration Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!----==== CSS ====-->
    <link rel="stylesheet" href="style.css">
    
    <!----==== Icounscout Link ====-->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    
     <title>Password Show & Hide</title>
</head>
<body>
    <div class="container">
        <div class="input-box">
            <input type="password" spellcheck="false" required>
            <label for="">Password</label>
            <i class="uil uil-eye-slash toggle"></i>
        </div>
    </div>

    <script>

        const toggle = document.querySelector(".toggle"),
              input = document.querySelector("input");

              toggle.addEventListener("click", () =>{
                  if(input.type ==="password"){
                    input.type = "text";
                    toggle.classList.replace("uil-eye-slash", "uil-eye");
                  }else{
                    input.type = "password";
                  }
              })

    </script>

</body>
</html>

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4070f4;
}

.container{
    position: relative;
    max-width: 340px;
    width: 100%;
    padding: 20px;
    border-radius: 6px;
    background-color: #fff;
}

.container .input-box{
    position: relative;
    height: 50px;
}

.input-box input{
    position: absolute;
    height: 100%;
    width: 100%;
    outline: none;
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 0 35px 0 15px;
    transition: all 0.2s linear;
}

input:is(:focus, :valid){
    border-color: #4070f4;
}

.input-box :is(label, i){
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    transition: all 0.2s linear;
}

.input-box label{
    left: 15px;
    pointer-events: none;
    font-size: 16px;
    font-weight: 400;
}

input:is(:focus, :valid) ~ label{
    color: #4070f4;
    top: 0;
    font-size: 12px;
    font-weight: 500;
    background-color: #fff;
}

.input-box i{
    right: 15px;
    cursor: pointer;
    font-size: 20px;
}

input:is(:focus, :valid) ~ i{
    color: #4070f4;
}

If you face any difficulties while creating your this Password Show and Hide Project or your code is not working as expected, you can download the source code files for this Show or Hide Password Project for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/show-hide-password-html-css-javascript/feed/ 0 How to make Password Strength Checker in JavaScript https://www.codingnepalweb.com/password-strength-checker-javascript-2/ https://www.codingnepalweb.com/password-strength-checker-javascript-2/#respond Fri, 19 Nov 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4197 How to make Password Strength Checker in JavaScript

Hello friend, hope you are doing awesome, today in this blog I have shown How to make a Password Strength Checker using HTML CSS, and JavaScript, as you know there are lots of JavaScript projects that I have created like email validation, password, and confirm password checker. As like them, this project is also relevant.

In simple and easy language, Password Strenght Checker is the program that tests our password and shows how strong our password is. This type of program helps users to create theirs strong passwords, which really helps to prevent hacking.

Let’s have a look at the given image of our program’s Password Strength Checker. There are three input fields with some characters. As you can see the first field shows our entered password is weak because i have used only alphabet letters, the second field shows the entered password is medium because I have added some numbers with alphabet letters and the last input field shows that our password is strong because I have entered alphabet letter, number, and one special character.

Now you have to know, to create a strong password we need to combine alphabet letters (capital letters and small letters), some numbers (like 1,2,3….9), and some special characters(like @,! $,%,#,&,*).

I hope now you got the basic and theoretical meaning of the Password Strength Checker, rather than theory I would highly recommend you to watch the given video tutorial of this project because in the video you will get the opportunity to see the real example of how this program checks the password and all the HTML CSS and JavaScript code that I have used to create this Password Strength Checker.

Password Strength Checker | HTML CSS & JavaScript

 

I have provided all the HTML CSS and JavaScript source code that I used to create this Password Strength Checker below, before jumping into the source code, you need to know some important points of this program.

As you have seen on the given video tutorial of this Password strength checker. At first, we saw a blank password field with a grey border. When I entered the character, it’s started to check and according to the character border, text, and eye icon color changed, that makes more beautiful, isn’t it?. Also by clicking on the eye button we can see our character easily.

This UI design is made by HTML and CSS and to show password strength and to show or hide passwords, I have used JavaScript code.

You can make this Password Strength Checker by watching a video tutorial and following the codes or you can take all the HTML CSS and javascript code forms below:

You Might Like This:

Password Strength Checker [Source Code]

To get the following HTML CSS and JavaScript code for Password Strength Checker & Password show and hide while clicking on the eye icon. You need to create two files one is an HTML file and another is a CSS file. After creating these two 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Show Password Strength | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>
  </head>
<body>
  <div class="container">
    <div class="input-box">
      <i class="fas fa-eye-slash show_hide"></i>
      <input spellcheck="false" type="password" placeholder="Enter password">
    </div>
    <div class="indicator">
      <div class="icon-text">
        <i class="fas fa-exclamation-circle error_icon"></i>
        <h6 class="text"></h6>
      </div>
    </div>
  </div>

  <script>
  const input = document.querySelector("input"),
        showHide = document.querySelector(".show_hide"),
        indicator = document.querySelector(".indicator"),
        iconText = document.querySelector(".icon-text"),
        text = document.querySelector(".text");

  // js code to show & hide password

  showHide.addEventListener("click", ()=>{
    if(input.type === "password"){
      input.type = "text";
      showHide.classList.replace("fa-eye-slash","fa-eye");
    }else {
      input.type = "password";
      showHide.classList.replace("fa-eye","fa-eye-slash");
    }
  });

  // js code to show password strength (with regex)

  let alphabet = /[a-zA-Z]/, //letter a to z and A to Z
      numbers = /[0-9]/, //numbers 0 to 9
      scharacters = /[!,@,#,$,%,^,&,*,?,_,(,),-,+,=,~]/; //special characters

  input.addEventListener("keyup", ()=>{
    indicator.classList.add("active");

    let val = input.value;
    if(val.match(alphabet) || val.match(numbers) || val.match(scharacters)){
      text.textContent = "Password is weak";
      input.style.borderColor = "#FF6333";
      showHide.style.color = "#FF6333";
      iconText.style.color = "#FF6333";
    }
    if(val.match(alphabet) && val.match(numbers) && val.length >= 6){
      text.textContent = "Password is medium";
      input.style.borderColor = "#cc8500";
      showHide.style.color = "#cc8500";
      iconText.style.color = "#cc8500";
    }
    if(val.match(alphabet) && val.match(numbers) && val.match(scharacters) && val.length >= 8){
      text.textContent = "Password is strong";
      input.style.borderColor = "#22C32A";
      showHide.style.color = "#22C32A";
      iconText.style.color = "#22C32A";
    }

    if(val == ""){
      indicator.classList.remove("active");
      input.style.borderColor = "#A6A6A6";
      showHide.style.color = "#A6A6A6";
      iconText.style.color = "#A6A6A6";
    }
  });

  </script>

</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7D2AE8;
}
.container{
  position: relative;
  max-width: 460px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 30px;
  margin: 0 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.container .input-box{
  position: relative;
}
.input-box .show_hide{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #A6A6A6;
  padding: 5px;
  cursor: pointer;
}
.input-box input{
  height: 60px;
  width: 100%;
  border: 2px solid #d3d3d3;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  outline: none;
  padding: 0 50px 0 16px;
}
.container .indicator{
  display: none;
}
.container .indicator.active{
  display: block;
  margin-top: 14px;
}
.indicator .icon-text{
  display: flex;
  align-items: center;
}
.icon-text .error_icon{
  margin-right: 8px;
}
.icon-text .text{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}

If you face any difficulties while creating your Password Strength Checker or your code is not working as expected, you can download the source code files for this Check Password Strength for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/password-strength-checker-javascript-2/feed/ 0 Check Password & Confirm Password using JavaScript https://www.codingnepalweb.com/check-password-confirm-password-javascript/ https://www.codingnepalweb.com/check-password-confirm-password-javascript/#respond Fri, 22 Oct 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4201 Check Password & Confirm Password using JavaScript

Hello friend, hope you are doing well, today are going to create some useful project like Check Password & Confirm Password using HTML CSS and JavaScript. There are lots of JavaScript projects I have created for beginners to advance, I am sure these will be also very awesome and useful projects.

Check password and confirm password features are mostly used, while we are going to set our new password to login into a website. It helps users to remember their passwords because they have to match the password in both input fields.

Let’s have a look at the given image of your projects [Check Password & Confirm Password], The upper input field is inactive condition but the second input field and button are disabled. It means we can not enter characters on the second input field and we cannot click on the button. When the user enters eight or more than eight characters on the first input field then second input field and button will activate. After clicking on the button we know that our password matched or not.

Along with this, I have added some animation on the input field, that will happen when we focus on the input field, and also I have added password show or hide features while we click on the eye icon.

Rather than words, I would like to show you the real demo of this program [Check Password & Confirm Password using JavaScript], Now we are going to watch the video tutorial that is provided below. By watching the live video tutorial we will see the real demo of this program and get the idea of how all the HTML CSS and JavaScript codes are working properly and perfectly.

Check Password & Confirm Password in JavaScript

I have provided all the HTML CSS and JavaScript source code that I have used to create this program Check Password & Confirm Password, Password show and hide while clicking on the eye icon and Input field animation on focus. Before jumping into the source code file, you need to know some basic concepts of this program and tutorial.

As you have seen on the video tutorial of this program [Check Password & Confirm Password using JavaScript]. At first, we can only focus and type in the first input field. The second input field and button are in disabled form. When I type eight words on the first input field then the second field is activated and the button also.

At first, our typed password is in dot form, after I clicked on the eye icon our password converted into alphabet or number form. By clicking on the button We knew that you have entered a similar password or something different.

To make input field animation and UI design I have used only HTML and CSS. And to make the password show and hide while clicking on the eye button and to check the password and confirm the password I used JavaScript.

You Might Like This:

Check Password & Confirm Password [Source Code]

To get the following HTML CSS and JavaScript code for Check Password & Confirm Password, Password show and hide while clicking on the eye icon and Input label up animation. You need to create two files one is an HTML file and another is a CSS file. After creating these two 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
     <title> Check Password and Confirm Password </title> 
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>
   </head>
<body>
  <div class="wrapper">
      <div class="input-box">
        <input id="create_pw" type="password" required>
        <label>Create password</label>
      </div>
      <div class="input-box">
        <input id="confirm_pw" type="password" required disabled>
        <label>Confirm password</label>
        <i class="fas fa-eye-slash show"></i>
      </div>
      <div class="alert">
        <i class="fas fa-exclamation-circle error"></i>
        <span class="text">Enter at least 8 characters</span>
      </div>
      <div class="input-box button">
        <input id="button" type="button" value="Check" disabled>
      </div>
  </div>
  
  <script>
  const createPw = document.querySelector("#create_pw"),
   confirmPw = document.querySelector("#confirm_pw"),
   pwShow = document.querySelector(".show"),
   alertIcon = document.querySelector(".error"),
   alertText= document.querySelector(".text"),
   submitBtn = document.querySelector("#button");

   pwShow.addEventListener("click", ()=>{
     if((createPw.type === "password") && (confirmPw.type === "password")){
       createPw.type = "text";
       confirmPw.type = "text";
       pwShow.classList.replace("fa-eye-slash","fa-eye");
     }else {
       createPw.type = "password";
       confirmPw.type = "password";
       pwShow.classList.replace("fa-eye","fa-eye-slash");
     }
   });

   createPw.addEventListener("input", ()=>{
     let val = createPw.value.trim()
     if(val.length >= 8){
       confirmPw.removeAttribute("disabled");
       submitBtn.removeAttribute("disabled");
       submitBtn.classList.add("active");
     }else {
       confirmPw.setAttribute("disabled", true);
       submitBtn.setAttribute("disabled", true);
       submitBtn.classList.remove("active");
       confirmPw.value = "";
       alertText.style.color = "#a6a6a6";
       alertText.innerText = "Enter at least 8 characters";
       alertIcon.style.display = "none";
     }
   });

  submitBtn.addEventListener("click", ()=>{
   if(createPw.value === confirmPw.value){
     alertText.innerText = "Password matched";
     alertIcon.style.display = "none";
     alertText.style.color = "#4070F4";
   }else {
     alertText.innerText = "Password didn't matched";
     alertIcon.style.display = "block";
     alertText.style.color = "#D93025";
   }
  });
  </script>

</body>
</html>

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070F4;
  padding: 0 35px;
}
.wrapper{
  position: relative;
  background: #fff;
  max-width: 480px;
  width: 100%;
  padding: 35px 40px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.input-box{
  position: relative;
  height: 65px;
  margin: 25px 0;
}
.input-box input{
  position: relative;
  height: 100%;
  width: 100%;
  outline: none;
  color: #333;
  font-size: 18px;
  font-weight: 500;
  padding: 0 40px 0 16px;
  border: 2px solid lightgrey;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.input-box input:focus,
.input-box input:valid{
  border-color: #4070F4;
}
.input-box i,
.input-box label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #a6a6a6;
  transition: all 0.3s ease;
}
.input-box label{
  left: 15px;
  font-size: 18px;
  font-weight: 400;
  background: #fff;
  padding: 0 6px;
  pointer-events: none;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label{
  top: 0;
  font-size: 14px;
  color: #4070F4;
}
.input-box i{
  right: 15px;
  cursor: pointer;
  padding: 8px;
}
.alert{
  display: flex;
  align-items: center;
  margin-top: -13px;
}
.alert .error{
  color: #D93025;
  font-size: 18px;
  display: none;
  margin-right: 8px;
}
 .text{
  font-size: 18px;
  font-weight: 400;
  color: #a6a6a6;
}
.input-box.button input{
  border: none;
  font-size: 20px;
  color: #fff;
  letter-spacing: 1px;
  background: #4070F4;
  cursor: not-allowed;
}
.input-box.button input.active:hover{
  background: #265df2;
  cursor: pointer;
}

If you face any difficulties while creating your Password and Confirm Password Checker or your code is not working as expected, you can download the source code files for this Confirm and Created Password Checker for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/check-password-confirm-password-javascript/feed/ 0 Email Validation in HTML CSS and JavaScript https://www.codingnepalweb.com/email-validation-in-html-css-javascript/ https://www.codingnepalweb.com/email-validation-in-html-css-javascript/#respond Fri, 02 Jul 2021 21:11:18 +0000 https://www.codingnepalweb.com/?p=4214 Email Validation in HTML CSS and JavaScript

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

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

Email Validation HTML CSS 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
   <title> Email Validation in JavaScript | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <form action="#">
    <div class="input-box">
      <input class="input" type="text" placeholder="Enter your email">
      <i class="fas fa-envelope email-icon"></i>
      <i class="fas fa-exclamation-circle error-icon"></i>
      <i class="fas fa-check-circle passed-icon"></i>
      <input class="button" type="submit" value="Check">
    </div>
    <p class="text"></p>
  </form>
  <script>
  //getting all attribute
  const form = document.querySelector("form"),
  eInput = form.querySelector(".input"),
  text = form.querySelector(".text");

  form.addEventListener("submit", (e)=>{
    e.preventDefault(); //preventing form from submitting
    let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //Regex pattern to validate email
    form.classList.add("error");
    form.classList.remove("valid");
    if(eInput.value == ""){
      text.innerText = "Email can't be blank";
    }else if (!eInput.value.match(pattern) ) { //if patter is not matched with user's enter value
      text.innerText = "Please enter a valid email";
    }else{
      form.classList.replace("error" , "valid"); //replacing error class with valid class
      text.innerText = "This is a valid email";
    }
  });
  </script>
</body>
</html>

 /* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#4671EA,#AC34E7);
  padding: 0 20px;
}
form{
  max-width: 550px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 4px;
}
form .input-box{
  display: flex;
  height: 55px;
  align-items: center;
  position: relative;
}
.input-box input{
  height: 100%;
  outline: none;
  border: 2px solid #bfbfbf;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  padding: 0 45px;
  transition: all 0.3s ease;
}
.input-box input.input{
  width: 75%;
  margin-right: 20px;
}
form.valid .input-box input.input{
  border-color: #4671EA;
}
.input-box input.input:focus{
  border-color: #4671EA;
}
form.error input.input{
  border-color: #de0611;
}
.input-box input.button{
  width: 25%;
  padding: 0;
  color: #fff;
  background: #4671EA;
  border: none;
  cursor: pointer;
}
.input-box input.button:hover{
  background: #1748cf;
}
.input-box i{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.input-box i.email-icon{
  color: #bfbfbf;
  left: 15px;
  transition: all 0.3s ease;
}
form.valid i.email-icon{
  color: #1748cf;
}
.input-box input.input:focus ~ i.email-icon{
  color: #1748cf;
}
.input-box .error-icon,
.input-box .passed-icon{
  color: #de0611;
  left: calc(75% - 60px);
  display: none;
}
form.error .error-icon{
  display: block;
}
.input-box .passed-icon{
  color: #1748cf;
}
form.valid .passed-icon{
  display: block;
}
form .text{
  color: #de0611;
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0 -10px 2px;
}
form.valid .text{
  color: #1748cf;
}

If you face any difficulties while creating your Valid Email Checker or your code is not working as expected, you can download the source code files for this Valid Email Checker for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/email-validation-in-html-css-javascript/feed/ 0 Login Form Validation in HTML CSS & JavaScript https://www.codingnepalweb.com/login-form-validation-in-html-javascript/ https://www.codingnepalweb.com/login-form-validation-in-html-javascript/#comments Fri, 04 Jun 2021 08:35:15 +0000 https://www.codingnepalweb.com/?p=1988 Login Form Validation in HTML with Shake Effect

Hey friends, today in this blog you’ll learn how to create a Login Form Validation with Shake Effect in HTML CSS & JavaScript. In the earlier blog, I’ve shared how to create Login & Registration Form using HTML & CSS and now it’s time to validate the login form using JavaScript.

Form Validation in HTML means to check that the user’s entered credential – Email, Username, Password is valid and correct or not. User will not get access to the restricted page until he/she entered a valid email and password. And, Shake Effect in this Login Form means when the user clicks on the login button without entering their email and password then the input boxes shake to inform the user that these fields can’t be blank.

In our Login Form Validation in HTML & JavaScript, as you can see on the image preview, there is a login form that holds login text, two input fields, a login button, etc. at first those login errors are not shown but when the user clicks on the login button without entering their email & password then there is appear these errors with shake effect.

Once the user starts entering their credentials in the input fields then these errors will automatically hide. If you are feeling difficulties with what I’m saying then you can watch a video tutorial of this Login Form Validation in HTML with Shake Effect.

Video Tutorial of Form Validation in HTML & JavaScript

 
In the video, you’ve clearly seen how this login form looks like and how it show an error when the user tries to log in without entering an email and password or without entering a valid email address. This login form is created only for design purposes so when you entered a valid email & password and click on the login button then these details won’t send or submit anywhere.

If you want to send these details anywhere and want to receive them using PHP then you’ve to put that PHP file URL inside the action attribute of the form tag. I’ve already shared a blog on how to create Login & Registration Form with Email Verification using PHP. If you want to make this form workable and dynamic then don’t forget to read the mentioned blog.

You might like this:

Form Validation in HTML & JavaScript [Source Codes]

To create this program [Form Validation in HTML & JavaScript]. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the following codes into your file. You can also download the source code files of this Form Validation in HTML from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form validation in HTML & CSS | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Login Form</header>
    <form action="#">
      <div class="field email">
        <div class="input-area">
          <input type="text" placeholder="Email Address">
          <i class="icon fas fa-envelope"></i>
          <i class="error error-icon fas fa-exclamation-circle"></i>
        </div>
        <div class="error error-txt">Email can't be blank</div>
      </div>
      <div class="field password">
        <div class="input-area">
          <input type="password" placeholder="Password">
          <i class="icon fas fa-lock"></i>
          <i class="error error-icon fas fa-exclamation-circle"></i>
        </div>
        <div class="error error-txt">Password can't be blank</div>
      </div>
      <div class="pass-txt"><a href="#">Forgot password?</a></div>
      <input type="submit" value="Login">
    </form>
    <div class="sign-txt">Not yet member? <a href="#">Signup now</a></div>
  </div>

  <script src="script.js"></script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5372F0;
}
::selection{
  color: #fff;
  background: #5372F0;
}
.wrapper{
  width: 380px;
  padding: 40px 30px 50px 30px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
  font-size: 35px;
  font-weight: 600;
}
.wrapper form{
  margin: 40px 0;
}
form .field{
  width: 100%;
  margin-bottom: 20px;
}
form .field.shake{
  animation: shake 0.3s ease-in-out;
}
@keyframes shake {
  0%, 100%{
    margin-left: 0px;
  }
  20%, 80%{
    margin-left: -12px;
  }
  40%, 60%{
    margin-left: 12px;
  }
}
form .field .input-area{
  height: 50px;
  width: 100%;
  position: relative;
}
form input{
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 45px;
  font-size: 18px;
  background: none;
  caret-color: #5372F0;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
  border-bottom-width: 2px;
  transition: all 0.2s ease;
}
form .field input:focus,
form .field.valid input{
  border-color: #5372F0;
}
form .field.shake input,
form .field.error input{
  border-color: #dc3545;
}
.field .input-area i{
  position: absolute;
  top: 50%;
  font-size: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-area .icon{
  left: 15px;
  color: #bfbfbf;
  transition: color 0.2s ease;
}
.input-area .error-icon{
  right: 15px;
  color: #dc3545;
}
form input:focus ~ .icon,
form .field.valid .icon{
  color: #5372F0;
}
form .field.shake input:focus ~ .icon,
form .field.error input:focus ~ .icon{
  color: #bfbfbf;
}
form input::placeholder{
  color: #bfbfbf;
  font-size: 17px;
}
form .field .error-txt{
  color: #dc3545;
  text-align: left;
  margin-top: 5px;
}
form .field .error{
  display: none;
}
form .field.shake .error,
form .field.error .error{
  display: block;
}
form .pass-txt{
  text-align: left;
  margin-top: -10px;
}
.wrapper a{
  color: #5372F0;
  text-decoration: none;
}
.wrapper a:hover{
  text-decoration: underline;
}
form input[type="submit"]{
  height: 50px;
  margin-top: 30px;
  color: #fff;
  padding: 0;
  border: none;
  background: #5372F0;
  cursor: pointer;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
form input[type="submit"]:hover{
  background: #2c52ed;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const form = document.querySelector("form");
eField = form.querySelector(".email"),
eInput = eField.querySelector("input"),
pField = form.querySelector(".password"),
pInput = pField.querySelector("input");

form.onsubmit = (e)=>{
  e.preventDefault(); //preventing from form submitting
  //if email and password is blank then add shake class in it else call specified function
  (eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();
  (pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();

  setTimeout(()=>{ //remove shake class after 500ms
    eField.classList.remove("shake");
    pField.classList.remove("shake");
  }, 500);

  eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup
  pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup

  function checkEmail(){ //checkEmail function
    let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email
    if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class
      eField.classList.add("error");
      eField.classList.remove("valid");
      let errorTxt = eField.querySelector(".error-txt");
      //if email value is not empty then show please enter valid email else show Email can't be blank
      (eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";
    }else{ //if pattern matched then remove error and add valid class
      eField.classList.remove("error");
      eField.classList.add("valid");
    }
  }

  function checkPass(){ //checkPass function
    if(pInput.value == ""){ //if pass is empty then add error and remove valid class
      pField.classList.add("error");
      pField.classList.remove("valid");
    }else{ //if pass is empty then remove error and add valid class
      pField.classList.remove("error");
      pField.classList.add("valid");
    }
  }

  //if eField and pField doesn't contains error class that mean user filled details properly
  if(!eField.classList.contains("error") && !pField.classList.contains("error")){
    window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag
  }
}

That’s all, now you’ve successfully created a Login Form Validation in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/login-form-validation-in-html-javascript/feed/ 32 Limit Input Characters using HTML CSS & JavaScript https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/ https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/#comments Mon, 15 Mar 2021 10:25:00 +0000 Limit Input Characters using HTML CSS & JavaScript
Hey friends, today in this blog you’ll learn how to Limit Input Characters using HTML CSS & JavaScript. Earlier I have shared a blog on how to create Random Password using pure JavaScript and now I’m going to create a program or input field that allowed users to enter a specified number of characters only.
 
In this program [Limit Input Characters], there is an input field on the webpage with an icon and counter number. This counter number informs the user about how many numbers of characters they can enter. At first, this input field is inactive with a grey border color but when you focus on the input field then the color of the border change into another color which means the input field is active now.
 
When you start typing some characters in the input field then the color of the icon and counter also change into the same color as the input border color as well the counter starts decreasing by the number of your entered characters.
 
If you want to watch a full video tutorial or feeling difficult to understand what I’m saying above then you can the full video of this program [Limit Input Characters]

Video Tutorial on How to Limit Input Characters

 
In the video, you have seen the demo of this design or program and how I created this. As you know, I used JavaScript to make the counter dynamic and I believe these few lines of JavaScript were not much difficult to understand for you even if you’re a beginner. Except this all other parts including changing border color on focus in the input field and changing the color of the icon if user input some characters are purely created using HTML & CSS only.

This can be only possible using required attribute in the <input type=”text”> tag and :focus & :valid selectors in CSS. In this video, I have just shown you limit input characters in input but with the same codes, you can also do for the Textarea field.

You might like this:

Limit Input Characters in JavaScript [Source Codes]

To create this program [Limit Input Characters]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Limit Input Characters from the below download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Limit Input Characters | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <!-- Iconsout Link for Icons -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css">
</head>
<body>
  <div class="wrapper">
    <form action="#">
      <input type="text" spellcheck="false" placeholder="username" maxlength="19" required>
      <i class="uis uis-at"></i>
      <span class="counter">19</span>
    </form>
  </div>

  <script>
    const input = document.querySelector("form input"),
    counter = document.querySelector("form .counter"),
    maxLength = input.getAttribute("maxlength");

    input.onkeyup = ()=>{
      counter.innerText = maxLength - input.value.length;
    }
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.wrapper{
  background: #fff;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper form{
  height: 55px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
form i{
  position: absolute;
  width: 55px;
  text-align: center;
  font-size: 23px;
  color: #c4c4c4;
  pointer-events: none;
}
form input:valid ~ i{
  color: #58cff1;
}
form input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 50px 0 45px;
  font-size: 20px;
  caret-color: #58cff1;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.1s ease;
}
form input::selection{
  color: #fff;
  background: #58cff1;	
}
form input:focus,
form input:valid{
  border-color: #58cff1;
}
form input::placeholder{
  color: #c4c4c4;
}
form .counter{
  position: absolute;
  right: 3px;
  width: 55px;
  font-size: 20px;
  color: #c4c4c4;
  text-align: center;
  border-left: 1px solid #d8d8d8;
  pointer-events: none;
}
form input:valid ~ .counter{
  color: #58cff1;
  border-color: #58cff1;
}

That’s all, now you’ve successfully created a Limit Input Characters using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/feed/ 1