Author: | ankityadavhere |
---|---|
Views Total: | 2,747 views |
Official Page: | Go to website |
Last Update: | July 14, 2021 |
License: | MIT |
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"; } });