Wątek przeniesiony 2023-09-18 10:45 z JavaScript przez Riddle.

Przycisk "Pokaż"/"Ukryj" hasło w formularzu

1

Witam,
Piszę ponieważ mam problem z przyciskiem Show/Hide password jquery validation. Sam formularz działą bez problemu natomiast jeśli zaczynam coś pisać w polu password pojawia się wiadomość np. "Wprowadź minimum 6 znaków" i jednocześnie przycisk Show/Hide Idzie w dół, dlaczego tak się dzieje i czy jest sposób żeby ten przycisk pozostał w jednym miejscu (żeby się nie przesuwał)? hideShowPassword.min.js pobrałem z link

Proszę o pomoc.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>My form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="style.css" type="text/css"> -->
    <style>
        input {
            border: 0;
            margin-bottom: 3px;
            display: block;
            width: 100%;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>

    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/profile/show">Profile</a></li>
                    <li><a href="/logout">Log out</a></li>
                </ul>
            </div>
        </nav>
        <form method="post" action="#" id="formSignup" name="form">
            <div class="w-50 set-margin">
                <input id="inputEmail" name="email" placeholder="Podaj adres e-mail" class="form-control" />

                <input type="password" placeholder="Podaj hasło" name="password" class="form-control"
                    id="inputPassword" />
            </div>
            <button type="submit" class="btn btn-success">Zarejestruj się</button>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
    <script src="hideShowPassword.min.js"></script>
    <!-- <script src="app.js"></script> -->
    <script>
        $.validator.addMethod('validPassword',
            function (value, element, param) {

                if (value != '') {
                    if (value.match(/.*[a-z]+.*/i) == null) {
                        return false;
                    }
                    if (value.match(/.*\d+.*/) == null) {
                        return false;
                    }
                }

                return true;
            },
            'Musi zawierać przynajmniej jedną literę i jedną cyfrę'
        );
        $(document).ready(function () {

            $('#formSignup').validate({
                rules: {

                    email: {
                        required: true,
                        email: true,
                    },
                    password: {
                        required: true,
                        minlength: 6,
                        validPassword: true
                    }
                },
                messages: {
                    email: {
                        required: 'Pole wymagane',
                        email: 'Wprowadź poprawny email'
                    },
                    password: {
                        required: 'Pole wymagane',
                        minlength: 'Wprowadź minimum 6 znaków'
                    }
                }
            });
            $('#inputPassword').hideShowPassword({
                show: false,
                innerToggle: 'focus',
            });
        });
    </script>
</body>

</html>
1

Oprócz umiejętności "pożyczania kodu" trzeba umiejętność obsługi CSS. To, co jest wgląda na bootstrap

pojawia się wiadomość np. "Wprowadź minimum 6 znaków" i jednocześnie przycisk Show/Hide Idzie w dół, dlaczego tak się dzieje

Pola zachowują się w pełni racjonalnie, to tak w defaulcie jest.
Źle, że widzisz w tym magię.

1

Dlatego że przycisk na styl position:absolute;top: 50%;, a wyświetlenie napisu pod polem tekstowym zmienia wysokość.

Otwórz narzędzia developerskie, to zobaczysz:

screenshot-20230905103645.png

Jest to wypadkowa dwóch faktów:

  • Po pierwsze, biblioteka której używasz "hideShowPassword" dodaje wrapper .div dookoła Twojego inputa
  • Po drugie, Twój walidator dodaje element z błędem zaraz poniżej Twojego inputa

Wynik jest taki, że hideShowPassword otacza wrapperem zarówno input jak i element z błędem, element z błędem się pojawia i zmienia wysokość wrappera - więc w pewien sposób miesza z wewnętrznym stanem biblioteki "hideShowPassword".

Otwórz sobie dokumentację "hideShowPassword": https://github.com/cloudfour/hideShowPassword

Znajdziesz tam dział "Options", a tam informację o tym że możesz dodać toggle: {verticalAlign}, kod wyglądałby tak:

$('#inputPassword').hideShowPassword({
    show: false,
    toggle: {verticalAlign: 'top'},
    innerToggle: 'focus',
});

Wygląda to wtedy tak, i zachowuje tą pozycję kiedy pojawia się błąd formularza.

screenshot-20230905104244.png

Przycisk jest jednak za wysoko, zbyt blisko krawędzi. Znowu zerknę do dokumentacji: "Options" i jest tam opcja offset. Moje testy wykazują że offset:4 pasuje dobrze:

$('#inputPassword').hideShowPassword({
    show: false,
    toggle: {
        verticalAlign: 'top',
        offset: 4
    },
    innerToggle: 'focus',
});

Wygląda to wtedy tak:

screenshot-20230905104439.png

Jednak musisz wiedzieć że jest to rozwiązanie bardzo słabe, bo dodajemy te opcje tylko po to żeby dopasować na siłę jedną bibliotekę do drugiej, nie jest to podejście SOLID, i raczej przysporzy Ci tylko więcej problemów w przyszłości.

0

Dziękuję bardzo za odpowiedź, która rozwiązuję mój problem.

1 użytkowników online, w tym zalogowanych: 0, gości: 1