Password validation
Bootstrap 5 Password validation component
Responsive Password validation built with Bootstrap 5. Provide feedback your users whether their password strength is sufficient through password validation.
Basic example
To make a validation element that also displays password requirements:
- use input with
type=password
and div with alert class - Add custom CSS that will add
display: none
for checks and crosses - Add JS that:
- a) will make the alert div appear when the input element is in
focus
and disappear when it is not - b) specify the terms of the password
- c) will turn crosses into checks if the condition is met and vice versa, and if all conditions are met, it will change the div background and feedback input color
- a) will make the alert div appear when the input element is in
Good
Wrong
- Your password must have at least 8 chars
- Your password must have at least 1 big letter.
- Your password must have at least 1 number.
- Your password must have at least 1 special char.
<div class="row">
<div class="col-6">
<div class="input-group d-flex">
<span
class="input-group-text border-0"
id="password"
>
<i class="fas fa-lock fa-2x me-1"></i>
</span>
<input
type="password"
class="form-control rounded mt-1"
placeholder="Type your password"
aria-label="password"
aria-describedby="password"
id="password-input"
/>
<div class="valid-feedback">Good</div>
<div class="invalid-feedback">Wrong</div>
</div>
</div>
<div class="col-6 mt-4 mt-xxl-0 w-auto h-auto">
<div
class="alert px-4 py-3 mb-0 d-none"
role="alert"
data-mdb-color="warning"
id="password-alert"
>
<ul class="list-unstyled mb-0">
<li class="requirements leng">
<i class="fas fa-check text-success me-2"></i>
<i class="fas fa-times text-danger me-3"></i>
Your password must have at least 8 chars</li>
<li class="requirements big-letter">
<i class="fas fa-check text-success me-2"></i>
<i class="fas fa-times text-danger me-3"></i>
Your password must have at least 1 big letter.</li>
<li class="requirements num">
<i class="fas fa-check text-success me-2"></i>
<i class="fas fa-times text-danger me-3"></i>
Your password must have at least 1 number.</li>
<li class="requirements special-char">
<i class="fas fa-check text-success me-2"></i>
<i class="fas fa-times text-danger me-3"></i>
Your password must have at least 1 special char.</li>
</ul>
</div>
</div>
</div>
.wrong .fa-check
{
display: none;
}
.good .fa-times
{
display: none;
}
.valid-feedback,
.invalid-feedback {
margin-left: calc(2em + 0.25rem + 1.5rem);
}
addEventListener("DOMContentLoaded", (event) => {
const password = document.getElementById("password-input");
const passwordAlert = document.getElementById("password-alert");
const requirements = document.querySelectorAll(".requirements");
let lengBoolean, bigLetterBoolean, numBoolean, specialCharBoolean;
let leng = document.querySelector(".leng");
let bigLetter = document.querySelector(".big-letter");
let num = document.querySelector(".num");
let specialChar = document.querySelector(".special-char");
const specialChars = "!@#$%^&*()-_=+[{]}\\|;:'\",<.>/?`~";
const numbers = "0123456789";
requirements.forEach((element) => element.classList.add("wrong"));
password.addEventListener("focus", () => {
passwordAlert.classList.remove("d-none");
if (!password.classList.contains("is-valid")) {
password.classList.add("is-invalid");
}
});
password.addEventListener("input", () => {
let value = password.value;
if (value.length < 8) {
lengBoolean = false;
} else if (value.length > 7) {
lengBoolean = true;
}
if (value.toLowerCase() == value) {
bigLetterBoolean = false;
} else {
bigLetterBoolean = true;
}
numBoolean = false;
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < numbers.length; j++) {
if (value[i] == numbers[j]) {
numBoolean = true;
}
}
}
specialCharBoolean = false;
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < specialChars.length; j++) {
if (value[i] == specialChars[j]) {
specialCharBoolean = true;
}
}
}
if (lengBoolean == true && bigLetterBoolean == true && numBoolean == true && specialCharBoolean == true) {
password.classList.remove("is-invalid");
password.classList.add("is-valid");
requirements.forEach((element) => {
element.classList.remove("wrong");
element.classList.add("good");
});
passwordAlert.classList.remove("alert-warning");
passwordAlert.classList.add("alert-success");
} else {
password.classList.remove("is-valid");
password.classList.add("is-invalid");
passwordAlert.classList.add("alert-warning");
passwordAlert.classList.remove("alert-success");
if (lengBoolean == false) {
leng.classList.add("wrong");
leng.classList.remove("good");
} else {
leng.classList.add("good");
leng.classList.remove("wrong");
}
if (bigLetterBoolean == false) {
bigLetter.classList.add("wrong");
bigLetter.classList.remove("good");
} else {
bigLetter.classList.add("good");
bigLetter.classList.remove("wrong");
}
if (numBoolean == false) {
num.classList.add("wrong");
num.classList.remove("good");
} else {
num.classList.add("good");
num.classList.remove("wrong");
}
if (specialCharBoolean == false) {
specialChar.classList.add("wrong");
specialChar.classList.remove("good");
} else {
specialChar.classList.add("good");
specialChar.classList.remove("wrong");
}
}
});
password.addEventListener("blur", () => {
passwordAlert.classList.add("d-none");
});
});