website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

client-side-form-validation-using-vanilla-javascript

Client-Side Form Validation Using Vanilla JavaScript

  • 121
  • 29-Jan-2023
  • Codepen

  • Details

    index.html

    <!DOCTYPE html>
    <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>Client-Side Form Validation Using Vanilla JavaScript</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.atechseva.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>

    style.css

     @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;}

    script.js

    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");
      }
    });

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat