walidacja hasła "na żywo", ad hoc

pytanie zadane 1 kwietnia 2022 w JavaScript przez Vintar Nowicjusz (130 p.)

Cześć!

Od jakiegoś czasu intensywnie uczę się programowania, aktualnie na tapecie HTML, CSS i JavaScript.

No i mam zadanie, w którym mam napisać prosty sprawdzacz hasła, który na żywo będzie wyświetlał komunikat, że czegoś w haśle brak, na zasadzie "Hasło musi zawierać małą literę!", "Hasło musi zawierać wielką literę!", "Hasło musi zawierać cyfrę!", "Hasło musi zawierać znak specjalny!". Komunikaty powinny wyświetlać się w momencie zaczęcia wpisywania hasła i kolejno znikać po spełnieniu warunków.

I... nie mam pojęcia, czemu mi nie działa, próbowałem na przeróżne sposoby... :/

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>Hasłosprawdzacz</title>
    <meta name="description" content="Sprawdzacz poprawności hasła.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    
</head>

<body>
    <form style="max-width: 200px; width: 100%; margin: auto; text-align: center;">
        <div>
            <label for="password">Hasło</legend>
            <input type="password" id="password" onkeyup="validatePassword()">
        </div>

        <p class="errors" id="too_short"></p>
        <p class="errors" id="without_lowercase"></p>
        <p class="errors" id="without_uppercase"></p>
        <p class="errors" id="without_digits"></p>
        <p class="errors" id="without_special_chars"></p>

        <div>
            <label for="repeatedPassword">Powtórz hasło</legend>
            <input type="password" id="repeatedPassword">
        </div>

        <p class="errors" id="different_passwords"></p>

    </form>
    
    <script src="script.js"></script>
</body>


</html>

function validatePassword() {
    let pass = document.getElementById('password').value;
    
    if (pass.length < 8) {
        let tooShortError = document.getElemntById("too_short").value;
        tooShortError.textContent = "Hasło jest za krótkie! Musi zawierać min. 8 znaków.";
    }

    if (!/[a-z]/.test(pass)) {
        document.getElementById("without_lowercase").innerHTML = "Hasło musi zawierać min. jedną małą literę.";
    }

    if (!/[A-Z]/.test(pass)) {
        document.getElementById("without_uppercase").innerHTML = "Hasło musi zawierać min. jedną wielką literę."; 
    }

    if (!/[0-9]/.test(pass)) {
        document.getElementById("without_digits").innerHTML = "Hasło musi zawierać min. jedną cyfrę.";
    }

    if (!/[!#$%&? "]/.test(pass)) {
        document.getElementById("without_special_chars").innerHTML = "Hasło musi zawierać min. jednen znak specjalny."; 
    }
    
}

Będę dozgonnie wdzięczny za każdą podpowiedź! :)

2 odpowiedzi

odpowiedź 1 kwietnia 2022 przez adrian17 Mentor (351,140 p.)

Po pierwsze, masz literówki w kodzie - zajrzyj do konsoli przeglądarki, od razu o nich mówi.

Po drugie, tutaj źle używasz element - o tym też przeglądarka krzyczy w konsoli:

        let tooShortError = document.getElemntById("too_short").value;
        tooShortError.textContent = "Hasło jest za krótkie! Musi zawierać min. 8 znaków.";

Po trzecie, nigdzie nie masz kodu który by czyścił komunikat o błędzie gdy tekst spełni warunek.

A na boku, zmień innerHTML na textContent w pozostałych miejscach :)

komentarz 2 kwietnia 2022 przez Vintar Nowicjusz (130 p.)
edycja 3 kwietnia 2022 przez ScriptyChris

Dzięki, @adrian17!

Wydaje mi się, że zrobiłem to, o czym piszesz - i od razu przepraszam, za głupie błędy, jak ta literówka czy nie jednolite użycie textContent - wiele razy to zmieniałem i zwyczajnie nie zauważyłem takich głupot. :/

no ale...

ciągle mi nie działa. :/ Ciągle wywala mi błąd:

Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

I wciąż nie rozumiem, co robię źle... :/

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>Hasłosprawdzacz</title>
    <meta name="description" content="Sprawdzacz poprawności hasła.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <form style="max-width: 200px; width: 100%; margin: auto; text-align: center;">
        <div>
            <label for="password">Hasło</legend>
            <input type="password" id="password" onkeyup="validatePassword()">
        </div>

        <p class="errors" id="too_short"> </p>
        <p class="errors" id="without_lowercase"> </p>
        <p class="errors" id="without_uppercase"> </p>
        <p class="errors" id="without_digits"> </p>
        <p class="errors" id="without_special_chars"> </p>

        <div>
            <label for="repeatedPassword">Powtórz hasło</legend>
            <input type="password" id="repeatedPassword">
        </div>

        <p class="errors" id="different_passwords"></p>

    </form>
    
    
</body>


</html>

function validatePassword() {
    let pass = document.getElementById('password').value;
    
    if (pass.length < 8) {
        let tooShortError = document.getElementById("too_short").value;
        tooShortError.textContent = "Hasło jest za krótkie! Musi zawierać min. 8 znaków.";
    }

    if (!/[a-z]/.test(pass)) {
        let withoutLowercaseError = document.getElementById("without_lowercase").value;
        withoutLowercaseError.textContent = "Hasło musi zawierać min. jedną małą literę.";
    }

    if (!/[A-Z]/.test(pass)) {
        let withoutUppercaseError = document.getElementById("without_uppercase").value;
        withoutUppercaseError.textContent = "Hasło musi zawierać min. jedną wielką literę."; 
    }

    if (!/[0-9]/.test(pass)) {
        let withoutDigitsError = document.getElementById("without_digits").value;
        withoutDigitsError.textContent = "Hasło musi zawierać min. jedną cyfrę.";
    }

    if (!/[!#$%&? "]/.test(pass)) {
        let withoutSpecialCharsError = document.getElementById("without_special_chars").value;
        withoutSpecialCharsError.textContent = "Hasło musi zawierać min. jednen znak specjalny."; 
    }

    validatePassword();
    
}

Jeśli to możliwe, to znów proszę o jakieś podpowiedzi...

Co miałeś na myśli, mówiąc, że "źle używam elementu"?

odpowiedź 3 kwietnia 2022 przez VBService Ekspert (256,320 p.)
edycja 3 kwietnia 2022 przez VBService

document.getElementById("too_short").value
document.getElementById("without_lowercase").value
document.getElementById("without_uppercase").value
document.getElementById("without_digits").value
document.getElementById("without_special_chars").value

odwołujesz się do elementu <p>

        <p class="errors" id="too_short"> </p>
        <p class="errors" id="without_lowercase"> </p>
        <p class="errors" id="without_uppercase"> </p>
        <p class="errors" id="without_digits"> </p>
        <p class="errors" id="without_special_chars"> </p>

który nie zawiera atrybutu value, czyli powinno być raczej

const tooShortError = document.getElementById("too_short");
const withoutLowercaseError = document.getElementById("without_lowercase");

// itd.

propozycja zmian z użyciem tablicy dla "errors"

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <title>Hasłosprawdzacz</title>
    <meta name="description" content="Sprawdzacz poprawności hasła.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form style="max-width: 200px; width: 100%; margin: auto; text-align: center;">
      <div>
        <label for="password">Hasło</legend>
        <input type="password" id="password" onkeyup="validatePassword()">
      </div>

      <p class="errors" id="check-password"></p>

      <div>
        <label for="password-repeated">Powtórz hasło</legend>
        <input type="password" id="password-repeated">
      </div>

      <p class="errors" id="check-password-repeated"></p>
    </form>

    <script src="script.js"></script>
  </body>
</html>

/* dodatkowy css */
.errors {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  margin: 1em 0;
  color: red;
  font: 300 0.75em/1.1 monospace;
}

function validatePassword() {
  const password_value = (document.getElementById('password').value).trim(),
        check_password = document.querySelector('#check-password');
  const errors = [];
 
  if (password_value.length < 8)
    errors.push('Hasło jest za krótkie! Musi zawierać min. 8 znaków.');
 
  if (!/[a-z]/.test(password_value))
    errors.push('Hasło musi zawierać min. jedną małą literę.');
 
  if (!/[A-Z]/.test(password_value))
    errors.push('Hasło musi zawierać min. jedną wielką literę.');
 
  if (!/[0-9]/.test(password_value))
    errors.push('Hasło musi zawierać min. jedną cyfrę.');
 
  if (!/[!#$%&?_"]/.test(password_value))
    errors.push('Hasło musi zawierać min. jednen znak specjalny.');
 
  if (errors)
    check_password.innerHTML = errors.join('<br>');
}