Advanced Form Validation In JavaScript

This JavaScript code snippet sets up form advanced validation functionality for an HTML form. It uses the JavaScript RegExp pattern to validate the username, email, and password strength. It also confirms that the user’s entered password matches a second password field.

Moreover, the code includes functionality to toggle the visibility of the password input field using eye icon buttons. When the form is submitted, the code prevents the default form submission behavior, and checks the validity of the email, password, and confirm password fields.

You can integrate this validation code snippet to validate login and signup forms.

How to Create Advanced Form Validation Functionality in JavaScript

First of all, create the HTML form with the necessary input fields as follows:

<div class="container">
      <h3>Signup</h3>
      <form action="#">
        <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 password-hide"></i>
          </div>
          <span class="error password-error">
            <i class="bx bx-error-circle error-icon"></i>
            <p class="error-text">
              Please enter at least 8 character 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="confirpassword"
            />
            <i class="bx bx-hide password-hide"></i>
          </div>
          <span class="error confirm-error">
            <i class="bx bx-error-circle error-icon"></i>
            <p class="error-text">Password don't match.</p>
          </span>
        </div>
        <div class="field button-field input-field">
          <input type="submit" value="Submit Now" />
        </div>
      </form>
    </div>

Now, style the form using the following CSS styles. You can change the CSS values in order to customize the form according to your needs.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
 background:red;
}
.container {
  position: relative;
  width: 100%;
  max-width: 370px;
  padding: 25px;
  background-color: #fff;
  border-radius: 8px;
box-sizing: border-box;
}
.container h3 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.container form {
  margin-top: 30px;
}
form .field {
  margin-bottom: 20px;
}
form .input-field {
  position: relative;
  width: 100%;
  height: 55px;
}
.input-field input {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  border: 1px solid #d1d1d1;
  border-radius: 8px;
  outline: none;
}
.invalid input {
  border: 1px solid #d93025;
}
.input-field .password-hide {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #919191;
  padding: 3px;
  cursor: pointer;
}
.field .error {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #d93025;
  display: none;
}
.invalid .error {
  display: flex;
}
.error .error-icon {
  font-size: 15px;
  margin-right: 6px;
}
.create-password .error {
  align-items: flex-start;
}
.create-password .error-icon {
  margin-top: 4px;
}
.button-field {
  margin: 25px 0 6px;
}
.button-field input {
  font-size: 16px;
  font-weight: 400;
  background-color: #4070f4;
  color: #fff;
  transition: all 0.3s;
  cursor: pointer;
}
.button-field input:hover {
  background-color: #0e4bf1;
}

Finally, add the following JavaScript function to activate the validation functionalities.

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('.confirpassword');
function checkEmail() {
  const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  if (!emailInput.value.match(emailPattern)) {
    return emailField.classList.add('invalid');
  }
  emailField.classList.remove('invalid');
}
const eyeIcons = document.querySelectorAll('.password-hide');
eyeIcons.forEach((eyeIcon) => {
  eyeIcon.addEventListener('click', () => {
    const pInput = eyeIcon.parentElement.querySelector('input');
    if (pInput.type === 'password') {
      eyeIcon.classList.replace('bx-hide', 'bx-show');
      return (pInput.type = 'text');
    }
    eyeIcon.classList.replace('bx-show', 'bx-hide');
    return (pInput.type = 'password');
  });
});

function createPass() {
  const passPattern =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  if (!passInput.value.match(passPattern)) {
    return passField.classList.add('invalid');
  }
  passField.classList.remove('invalid');
}
function confirmPass() {
  if (passInput.value !== cPassInput.value || cPassInput.value === '') {
    return cPassField.classList.add('invalid');
  }
  cPassField.classList.remove('invalid');
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  checkEmail();
  createPass();
  confirmPass();
  emailInput.addEventListener('keyup', checkEmail);
  passInput.addEventListener('keyup', createPass);
  cPassInput.addEventListener('keyup', confirmPass);
});

That’s all! hopefully, you have successfully integrated this advanced form validation code into your project. If you have any questions or suggestions, feel free to comment below.