Regex Based Form Validator For Bootstrap 5

Preview:

Description:

A script that demonstrates how to validate form fields in your Bootstrap 5 project by using custom Regex.

How to use it:

1. Import the necessary Bootstrap 5 framework in your document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Create two alert component that provides Success & Error feedbacks.

<!-- Alerts -->
<div id="successAlert" class="alert alert-success alert-dismissible fade show text-center" role="alert">
  <strong>Congrats!</strong> Your request has been successfully submitted ;)
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div id="failAlert" class="alert alert-danger alert-dismissible fade show text-center" role="alert">
  <strong>Whoops!</strong> Something is wrong :/
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

3. Apply form validators to your HTML form.

<form autocomplete="off">
  <div class="mb-4">
      <label for="username" class="form-label">Username</label>
      <input type="text" class="form-control" id="username" placeholder="Enter your username...">
      <small id="usernamevalid" class="form-text text-danger invalid-feedback">Username must be 2-10 characters long, and must start with a letter.</small>
  </div>
  <div class="mb-4">
      <label for="email" class="form-label">Email address</label>
      <input type="text" class="form-control" id="email" aria-describedby="emailHelp" autocomplete="off" placeholder="[email protected]">
      <div id="emailHelp" class="form-text"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" id="lockSvg" fill="currentColor" class="bi bi-lock-fill me-1 mb-1" viewBox="0 0 16 16">
          <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
        </svg>We'll <span>never</span> share your email with anyone else.</div>
      <small id="emailvalid" class="form-text text-danger invalid-feedback">Email must be valid!</small>
  </div>
  <div class="mb-4 phone">
      <label for="phone" class="form-label">Phone</label>
      <input type="text" class="form-control" id="phone" autocomplete="off" placeholder="+91">
      <small id="phonevalid" class="form-text text-danger invalid-feedback">Phone must be 10 digits long.</small>
  </div>
  <div class="mb-4">
      <label for="address" class="form-label">Address</label>
      <textarea name="address" id="address" class="form-control" autocomplete="off" placeholder="Enter your address..."></textarea>
  </div>
  <div class="mb-4">
      <label for="people" class="form-label">Number of people</label>
      <select class="form-control form-select-sm" id="people">
          <option>Select number of people</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
        </select>
  </div>
  <div class="mb-4">
      <label for="password" class="form-label">Password</label>
      <input type="password" class="form-control" id="password">
  </div>
  <div class="mb-4 form-check">
      <input type="checkbox" class="form-check-input" id="checkbox">
      <label class="form-check-label" for="checkbox">Keep me logged in</label>
  </div>
  <button id="submit" type="submit" class="myBtn btn">Submit</button>
</form>

const username = document.getElementById("username");
const email = document.getElementById("email");
const phone = document.getElementById("phone");
let validUsername = false;
let validEmail = false;
let validPhone = false;
const successAlert = document.getElementById("successAlert");
const failAlert = document.getElementById("failAlert");
successAlert.style.display = "none";
failAlert.style.display = "none";
username.addEventListener("blur", () => {
    let regex = /^[a-zA-Z]([0-9a-zA-Z]){1,10}$/;
    let str = username.value;
    if (regex.test(str)) {
        username.classList.remove("is-invalid");
        validUsername = true;
    } else {
        username.classList.add("is-invalid");
        validUsername = false;
    }
});
email.addEventListener("blur", () => {
    let emailHelp = document.getElementById("emailHelp");
    let regex = /^([_\-\.a-zA-Z0-9]+)@([_\-\.a-zA-Z0-9]+)\.([a-zA-Z]){2,7}$/;
    let str = email.value;
    if (regex.test(str)) {
        emailHelp.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" id="lockSvg" fill="currentColor" class="bi bi-lock-fill me-1 mb-1" viewBox="0 0 16 16">
        <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
      </svg>We'll <span>never</span> share your email with anyone else.</div>`;
        email.classList.remove("is-invalid");
        validEmail = true;
    } else {
        emailHelp.innerHTML = ``;
        email.classList.add("is-invalid");
        validEmail = false;
    }
});
phone.addEventListener("blur", () => {
    let regex = /^([0-9]){10}$/;
    let str = phone.value;
    if (regex.test(str)) {
        phone.classList.remove("is-invalid");
        validPhone = true;
    } else {
        phone.classList.add("is-invalid");
        validPhone = false;
    }
});
let submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
    e.preventDefault();
    if (validEmail && validUsername && validPhone) {
        successAlert.style.display = "block";
    } else {
        failAlert.style.display = "block";
    }
});