File "code04.php"

Full Path: /home/analogde/www/Design/fileman/Fusion/formulaire_bootstrap/code04.php
File size: 4.81 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!--
https://mdbootstrap.com/docs/standard/extended/password-validation/
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<style>
.wrong .fa-check {
  display: none;
}
.good .fa-times {
  display: none;
}
.valid-feedback,
.invalid-feedback {
margin-left: calc(2em + 0.25rem + 1.5rem);
}

</style>

<script>
  addEventListener("DOMContentLoaded", (event) => {
  const password = document.getElementById("password-input");
  const passwordAlert = document.getElementById("password-alert");
  const requirements = document.querySelectorAll(".requirements");
  const leng = document.querySelector(".leng");
  const bigLetter = document.querySelector(".big-letter");
  const num = document.querySelector(".num");
  const specialChar = document.querySelector(".special-char");

  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", () => {
      const value = password.value;
      const isLengthValid = value.length >= 8;
      const hasUpperCase = /[A-Z]/.test(value);
      const hasNumber = /\d/.test(value);
      const hasSpecialChar = /[!@#$%^&*()\[\]{}\\|;:'",<.>/?`~]/.test(value);

      leng.classList.toggle("good", isLengthValid);
      leng.classList.toggle("wrong", !isLengthValid);
      bigLetter.classList.toggle("good", hasUpperCase);
      bigLetter.classList.toggle("wrong", !hasUpperCase);
      num.classList.toggle("good", hasNumber);
      num.classList.toggle("wrong", !hasNumber);
      specialChar.classList.toggle("good", hasSpecialChar);
      specialChar.classList.toggle("wrong", !hasSpecialChar);

      const isPasswordValid = isLengthValid && hasUpperCase && hasNumber && hasSpecialChar;

      if (isPasswordValid) {
          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");
      }
  });

  password.addEventListener("blur", () => {
      passwordAlert.classList.add("d-none");
  });
});
</script>

<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
      data-mdb-alert-init 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>

</body>
</html>