CodePen Embed - Form Validation

<!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://cdn.tailwindcss.com"></script>

  <script src="https://kit.fontawesome.com/ffbd6d2f88.js" crossorigin="anonymous"></script>

  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-wrap justify-center items-center">
  <form class="my-10 p-5 w-72 md:w-96 bg-slate-200 rounded-lg flex flex-col items-center gap-4" id="user-form">
    <div class="flex flex-col gap-2">
      <label class="text-slate-700">Name</label>
      <input type="text" id="username" class="border-2 border-gray-300 rounded-lg px-3 py-2 w-60 focus:outline-none" required />
    </div>
    <div class="flex flex-col gap-2">
      <label class="text-slate-700">Email</label>
      <input type="email" id="email" class="border-2 border-gray-300 rounded-lg px-3 py-2 w-60 focus:outline-none" required />
      <div id="email-error" class="hidden mt-2 text-red-800 text-xs">
        invalid Email
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <label class="text-slate-700">Phone</label>
      <div class="relative">
        <span class="absolute bottom-2.5 left-2 text-slate-500 font-bold">+91</span>
        <input type="number" id="phone" class="border-2 border-gray-300 rounded-lg pl-10 py-2 w-60 focus:outline-none text-slate-800" required />
      </div>
      <div id="phone-error" class="hidden mt-2 text-red-800 text-xs">
        Phone number should be 10 digit long
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <label class="text-slate-700">Password
        <button class="px-3 py-2" id="password-view">
          <i class="fa-solid fa-eye text-blue-600"></i></button></label>
      <div>
        <input type="password" id="password" class="border-2 border-gray-300 rounded-lg px-3 py-2 w-60 focus:outline-none" required />
      </div>
      <p id="letter" class="hidden text-red-800 text-xs">A <b>lowercase</b> letter</p>
      <p id="capital" class="hidden text-red-800 text-xs">
        A <b>capital (uppercase)</b> letter
      </p>
      <p id="number" class="hidden text-red-800 text-xs">A <b>number</b></p>
      <p id="length" class="hidden text-red-800 text-xs">
        Minimum <b>10 characters</b>
      </p>
    </div>
    <div class="flex flex-col gap-2">
      <label class="text-slate-700">Confirm Password
        <button class="px-3 py-2" id="confirm-password-view">
          <i class="fa-solid fa-eye text-blue-600"></i></button></label>

      <input type="password" id="confirm-password" class="border-2 border-gray-300 rounded-lg px-3 py-2 w-60 focus:outline-none" required />
      <p id="confirm-letter" class="hidden text-red-800 text-xs">
        A <b>lowercase</b> letter
      </p>
      <p id="confirm-capital" class="hidden text-red-800 text-xs">
        A <b>capital (uppercase)</b> letter
      </p>
      <p id="confirm-number" class="hidden text-red-800 text-xs">A <b>number</b></p>
      <p id="confirm-length" class="hidden text-red-800 text-xs">
        Minimum <b>8 characters</b>
      </p>
      <p id="confirm-password-checker" class="hidden text-red-800 text-xs">Password not matching</p>
    </div>
    <div class="flex justify-center mt-5">
      <input type="submit" value="submit" class="px-4 py-2 rounded-lg border-2 border-violet-600 text-violet-600 cursor-pointer" />
    </div>
  </form>
  <div id="data-container" class="self-start mt-10"></div>
</body>

</html>

const userForm = document.getElementById("user-form")
const dataContainer = document.getElementById("data-container")

const username = document.getElementById("username");

const email = document.getElementById("email");
const emailError = document.getElementById("email-error");

const phone = document.getElementById("phone");
const phoneError = document.getElementById("phone-error");

const password = document.getElementById("password");
const letter = document.getElementById("letter");
const capital = document.getElementById("capital");
const number = document.getElementById("number");
const textlength = document.getElementById("length");

const confirmPassword = document.getElementById("confirm-password")
const confirmLetter = document.getElementById("confirm-letter");
const confirmCapital = document.getElementById("confirm-capital");
const confirmNumber = document.getElementById("confirm-number");
const confirmLength = document.getElementById("confirm-length");
const confirmPasswordChecker = document.getElementById("confirm-password-checker");

const passwordViewer = document.getElementById("password-view")
const confirmPasswordViewer = document.getElementById("confirm-password-view")


function ValidateName() {
    if (username.value !== "") {
        username.classList.add("border-green-400")
        username.classList.remove("border-gray-300")
    }
    else {
        username.classList.remove("border-green-400")
        username.classList.add("border-red-400")
    }
}

username.addEventListener("keyup", () => {
    ValidateName()
})


function ValidateEmail(mail) {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail.value)) {
        email.classList.add("border-green-400")
        email.classList.remove("border-red-400")
        emailError.classList.add("hidden")
        emailError.classList.remove("block")
        return true
    }
    else {
        email.classList.add("border-red-400")
        email.classList.remove("border-green-400")
        emailError.classList.remove("hidden")
        emailError.classList.add("block")
        return false;
    }
}

email.addEventListener("keyup", () => {
    ValidateEmail(email)
})



function ValidatePhoneNumber(phoneNumber) {
    if (phoneNumber.value.length === 10) {
        phone.classList.add("border-green-400")
        phone.classList.remove("border-red-400")
        phoneError.classList.add("hidden")
        phoneError.classList.remove("block")
    }
    else {
        phone.classList.remove("border-green-400")
        phone.classList.add("border-red-400")
        phoneError.classList.remove("hidden")
        phoneError.classList.add("block")
    }
}

phone.addEventListener("keyup", () => {
    ValidatePhoneNumber(phone)
})



function ValidatePassword(passwordValue, letter, capital, number, length,confirmChecker) {

    const lowerCaseLetters = /[a-z]/g;
    if (passwordValue.value.match(lowerCaseLetters)) {
        letter.classList.remove("block");
        letter.classList.add("hidden");
    } else {
        letter.classList.remove("hidden");
        letter.classList.add("block");
    }

    // Validate capital letters
    const upperCaseLetters = /[A-Z]/g;
    if (passwordValue.value.match(upperCaseLetters)) {
        capital.classList.remove("block");
        capital.classList.add("hidden");
    } else {
        capital.classList.remove("hidden");
        capital.classList.add("block");
    }

    // Validate numbers
    const numbers = /[0-9]/g;
    if (passwordValue.value.match(numbers)) {
        number.classList.remove("block");
        number.classList.add("hidden");
    } else {
        number.classList.remove("hidden");
        number.classList.add("block");
    }

    // Validate length
    if (passwordValue.value.length >= 10) {
        length.classList.remove("block");
        length.classList.add("hidden");
    } else {
        length.classList.remove("hidden");
        length.classList.add("block");
    }

    if (letter.classList.contains("block") || capital.classList.contains("block")
        || number.classList.contains("block") || length.classList.contains("block")) {
        passwordValue.classList.add("border-red-400")
        passwordValue.classList.remove("border-green-400")
    }
    else {
        passwordValue.classList.remove("border-red-400")
        passwordValue.classList.add("border-green-400")
    }
}

password.addEventListener("keyup", () => {
    ValidatePassword(password, letter, capital, number, textlength)
  confirmPass()
})



const confirmPass = () => {
  ValidatePassword(confirmPassword, confirmLetter, confirmCapital, confirmNumber, confirmLength,confirmPasswordChecker)
    if (password.value !== confirmPassword.value) {
        confirmPasswordChecker.classList.add("block");
        confirmPasswordChecker.classList.remove("hidden");
        confirmPassword.classList.add("border-red-400")
        confirmPassword.classList.remove("border-green-400")
    }
    else {
        confirmPasswordChecker.classList.add("hidden");
        confirmPasswordChecker.classList.remove("block");
        confirmPassword.classList.remove("border-red-400")
        confirmPassword.classList.add("border-green-400")
    }
}
confirmPassword.addEventListener("keyup",confirmPass)



userForm.addEventListener("submit", (e) => {
    e.preventDefault()
    if (username.classList.contains("border-green-400") && phone.classList.contains("border-green-400") &&
        email.classList.contains("border-green-400") && password.classList.contains("border-green-400") &&
        confirmPassword.classList.contains("border-green-400")) {
        let finalData = {
            username: username.value,
            email: email.value,
            phone: phone.value,
            password: password.value,
            confirmPassword: confirmPassword.value
        }
        dataContainer.innerHTML = `
                        <div class="flex flex-col gap-3">
                        <p>Username - ${finalData["username"]}</p>
                        <p>Email - ${finalData["email"]}</p>
                        <p>Phone - ${finalData["phone"]}</p>
                        <p>Password - ${finalData["password"]}</p>
                        <p>Confirm Password - ${finalData["confirmPassword"]}</p>
                        </div>
        `
    }
})



const showPassword = (value) => {
    if (value.type === "password") {
        value.type = "text"
    }
    else {
        value.type = "password"
    }
}

passwordViewer.addEventListener("click", (e) => {
    e.preventDefault()
    e.stopPropagation()
    showPassword(password)
})
confirmPasswordViewer.addEventListener("click", (e) => {
    e.preventDefault()
    e.stopPropagation()
    showPassword(confirmPassword)
})

This Pen is owned by Shubham Tiwari on CodePen.

See more by @shubhamtiwari909 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.