<form>
  <h3>Sign Up</h3>
  <figure>
    <span><i class="far fa-user"></i></span>
    <figcaption>Name</figcaption>
    <input type="text">
    <span class="error-msg"></span>
  </figure>
  <figure>
    <span><i class="far fa-envelope"></i></span>
    <figcaption>Email</figcaption>
    <input type="email">
    <span class="error-msg"></span>
  </figure>
  <figure>
    <span><i class="fas fa-key"></i></span>
    <figcaption>Password</figcaption>
    <input type="password" class="password">
    <span class="error-msg"></span>
  </figure>
  <figure>
    <span><i class="fas fa-lock"></i></span>
    <figcaption>Confirm</figcaption>
    <input type="password" class="password2">
    <span class="error-msg"></span>
  </figure>
  <button type="submit">Submit</button>
</form>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, lightgreen, darkgreen);
  font-family: helvetica;
  color: #222;
}

form {
  padding: 1em 0;
  width: 320px;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(skyblue, steelblue);
  box-shadow: 0 2px 2px #666;
  border-radius: 6px;
}

h3 {
  font-size: 2.4em;
  text-shadow: 1px 1px #ddd;
}

figure {
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 2fr 4fr;
  align-items: center;
  position: relative;
}

.error-msg {
  position: absolute;
  right: 0;
  bottom: -20px;
  color: red;
  font-size: 0.9em;
}

i {
  font-size: 1.6em;
  color: #ddd;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

input {
  height: 26px;
  outline: none;
  border: none;
  border-radius: 4px;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  font-family: inherit;
  font-size: 0.9em;
}

button {
  padding: 0.4em 0.8em;
  font-size: 1em;
  text-transform: uppercase;
  outline: none;
  border: none;
  border-radius: 4px;
  background: linear-gradient(lightgreen, darkgreen);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

button:active {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.error input {
  border: 2px solid red;
}

.success input {
  border: 2px solid green;
}
const form = document.querySelector("form");
const name = document.querySelector('input[type="text"]');
const email = document.querySelector('input[type="email"]');
const password = document.querySelector(".password");
const password2 = document.querySelector(".password2");

function showError(input, msg) {
  const parent = input.parentElement;
  parent.className = "error";
  const error = parent.querySelector(".error-msg");
  error.textContent = msg;
  error.style.display = "block";

  const timer = setTimeout(() => {
    error.style.display = "none";
    parent.className = "";
    clearTimeout(timer);
  }, 4000);
}

function showSuccess(input) {
  const parent = input.parentElement;
  parent.className = "success";
}

function checkEmail(input) {
  const regex = /^\S+@\S+\.\S+$/;

  regex.test(input.value.trim())
    ? showSuccess(input)
    : showError(input, `Email isn't valid`);
}

function checkRequired(inputArr) {
  inputArr.forEach((input) => {
    input.value.trim() === ""
      ? showError(input, `${getFieldName(input)} is required`)
      : showSuccess(input);
  });
}

function checkLength(input, min, max) {
  if (input.value.length < min) {
    showError(
      input,
      `${getFieldName(input)} must be at least ${min} characters`
    );
  } else if (input.value.length > max) {
    showError(
      input,
      `${getFieldName(input)} must be less than ${max} characters`
    );
  } else {
    showSuccess(input);
  }
}

function checkPasswordsMatch(input, input2) {
  if (input.value !== input2.value) showError(input2, `Passwords don't match`);
}

function getFieldName(input) {
  return input.previousElementSibling.textContent;
}

form.addEventListener("submit", (e) => {
  e.preventDefault();

  checkRequired([email, password2]);
  checkLength(name, 3, 15);
  checkLength(password, 6, 25);
  checkEmail(email);
  checkPasswordsMatch(password, password2);
});
Run Pen

External CSS

  1. https://pro.fontawesome.com/releases/v5.10.0/css/all.css

External JavaScript

This Pen doesn't use any external JavaScript resources.