Кастомная валидация пароля

Question

Есть 7 параметров для валидации пароля, которые отображают соответствие (шесть по 16%, а седьмой - 4%)

Необходимо написать код,чтобы можно было подсвечивать конкретную ошибку (классом) и отображать в % соответствие пароля требованиям

$(document).ready(function() {

  const elem = $('.percent');

  const value = elem.data('progress-value');

  elem.width(`${value}%`);

})

.row {
      max-width: 375px;
      width: 100%;
      height: 8px;
      background-color: #dbdbdb;
    }


    .percent {
      display: block;
      font-size: 0px;
      height: 100%;
      background: #47C965;
    }

.error {
  display: none;
}

.error__active {
  display: block;
}

<form action="">
  <input id="r_password" type="text" class="contacts__input" placeholder="Пароль*">
  <button>btn</button>
</form>


<div class="safe">
  <p>Защита паролем:</p>
  <div class="row">
    <span class="percent" data-progress-value="34"></span>
  </div>
</div>

<div class="wrap">
  <p class="error">пароль должен содержать хотя бы 1 большую букву</p>
  <p class="error">пароль должен содержать хотя бы 1 букву</p>
  <p class="error">пароль должен содержать хотя бы 1 специальный символ (не пробел, букву или цифру)</p>
  <p class="error">пароль должен содержать хотя бы 1 цифру</p>
  <p class="error">пароль должен содержать хотя бы 8 символов</p>
  <p class="error">пароль должен содержать хотя бы 1 букву или цифру</p>
  <p class="error">пароль должен содержать хотя бы 1 маленькую букву</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Кастомная валидация пароля

Ответы (0 шт):