marinkas

Так и получить:

document.querySelector('p.error:not([style="display: none"])')

Только учти, селектор сравнивают строки как есть, если там в style будет что-то ещё, или хотя-бы лишний пробел, то уже не поймает.

Вы проверку запускаете только при клике по кнопке.
Повесьте проверку на form.change

Или можно использовать встроенную в браузер валидацию.

body::after {
  display: none;
  content: 'Переверни!';
  position: fixed;
  bottom: 50vh;
  right: 50vw;
  transform: translate(50%, 50%);
  z-index: 1000;
}

@media (orientation: portrait) {
  body::after {
    display: block;
  }
}

Складываем в массив описания проверок, которым должен быть подвергнут пароль - это будут объекты, состоящие из функции, проверяющей соответствие пароля одному конкретному условию, и сообщения, демонстрируемого пользователю в случае, если проверка прошла неудачно.

Добавляем элементу с паролем обработчик события input, в котором бежим по массиву проверок, передаём функциям текущий пароль, собираем в массив сообщения о допущенных пользователем ошибках.

Как посчитать процент успеха в деле сочинения пароля - это будет отношение количества успешно пройденных проверок к общему количеству проверок, умноженное на сто.

Ну и всё, дальше остаётся только вывести результаты.

<div>
  <input id="password">
</div>
<div>
  <div>Сложность пароля: <span id="strength_percent">0</span>%</div>
  <progress id="strength_progress" max="100" value="0"></progress>
</div>
<div id="errors"></div>

const validations = [
  {
    test: val => val.length >= 8,
    message: 'пароль должен содержать хотя бы 8 символов',
  },
  {
    test: val => /[A-ZА-ЯЁ]/.test(val),
    message: 'пароль должен содержать хотя бы 1 большую букву',
  },
  {
    test: val => /[a-zа-яё]/.test(val),
    message: 'пароль должен содержать хотя бы 1 маленькую букву',
  },
  {
    test: val => /[^\s\da-zа-яё]/i.test(val),
    message: 'пароль должен содержать хотя бы 1 специальный символ (не пробел, букву или цифру)',
  },
  {
    test: val => /\d/.test(val),
    message: 'пароль должен содержать хотя бы 1 цифру',
  },
];

document.querySelector('#password').addEventListener('input', ({ target: { value } }) => {
  const errors = validations.reduce((acc, n) => (
    n.test(value) || acc.push(n.message),
    acc
  ), []);

  const strength = (validations.length - errors.length) / validations.length * 100;

  document.querySelector('#strength_progress').value = strength;
  document.querySelector('#strength_percent').innerText = strength | 0;
  document.querySelector('#errors').innerHTML = errors
    .map(n => `<p>${n}</p>`)
    .join('');
});

<picture>
	<source srcset="/images/example.webp" type="image/webp">
	<source srcset="/images/example.jpg" type="image/jpeg">
	<img src="/images/example.jpg" alt="example alt" width="1200" height="800" loading="lazy">
</picture>