Bootstrap 5 błędy walidacji się nie wyświetlają

pytanie zadane 3 kwietnia 2021 w HTML i CSS przez dawid2002 Mądrala (5,190 p.)

Witam! Mam taki problem, bo chciałem mieć walidacje kontrolek w formularzu za pomocą bootstrapa i napisałem kod, który niestety nie działa. W sensie te błędy się nie wyświetlają kiedy trzeba. Zależy mi na tym, aby w sytuacji gdy jakaś kontrolka będzie pusta to po naciśnięciu przycisku typu "submit" ma się wyświetlić komunikat, że trzeba uzupełnić danymi daną kontrolkę. Napisałem taki kod (kod jest przykładowy, aby sprawdzić działanie walidacji):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body class="d-flex justify-content-center">
    <div>
        <h3 class="mt-2">Logowanie</h3>
        <p class="lead">Proszę się zalogować, aby uzyskać dostęp do obszaru administracyjnego:</p>
        <form action="panel.html" novalidate>
            <div class="form-group mb-2">
                <label>Nazwa użytkownika:</label>
                <input type="text" class="form-control" required>
                <div class="invalid-feedback">
                    Podaj nazwę użytkownika.
                </div>
            </div>
            <div class="form-group mb-2">
                <label>Hasło:</label>
                <input type="password" class="form-control" required>
                <div class="invalid-feedback">
                    Podaj hasło.
                </div>
            </div>
            <button class="btn btn-primary w-100" type="submit">Zaloguj się</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Nie wiem czemu nic się nie wyświetla kiedy są pola puste. Może trzeba dodać jquery czy coś?

Z góry dziękuje za pomoc!

1 odpowiedź

odpowiedź 3 kwietnia 2021 przez Wiciorny Ekspert (270,170 p.)

no a jak to ma działać bez javascriptu? :D bo nie bardzo rozumiem oczywiście ze trzeba funkcje pisać, tak samo jak przy Bootstrap - biblioteka CSS, to tylko biblioteka która dodaje ci fajne ficzery funkcyjne [ do napisania funkcji i operacji na elementach boostrapa ] i głównie grafikę ale nic sie nie dzieje bez implementacji triggerów/funkcji zeby cos sie działo

Bootsrap sam w sobie dodaje ci tylko wygląd, i mozliwosc dla innych funkcji np javascriptu na korzystanie z elementów boostrapa

komentarz 5 kwietnia 2021 przez dawid2002 Mądrala (5,190 p.)

Powiem tak... W zasadzie odpowiedziałeś dobrze na moje pytanie, należy napisać funkcje w js (nawet w dokumentacji bootstrapa jest o tym mowa, niestety wcześniej tego nie zauważyłem...), ale wybacz, zarazem też napisałeś trochę głupot. Wg ciebie w moim powyższym kodzie nie ma js, to w takim razie spójrz na linijkę nr 32 ;) Mam wrażenie, że nie masz podstawowej wiedzy na temat bootstrapa, przecież kiedy podpinamy bootstrapa do pliku html to jednocześnie musimy też podpiąć plik js stworzony specjalnie dla potrzeb tej biblioteki (więcej tutaj: https://getbootstrap.com/docs/5.0/getting-started/introduction/#js). Oprócz tych "fajnych ficzerów i grafik" o których mówiłeś to bootstrap też udostępnia podstawowy js, aby mieć gotowe podstawowe funkcje do obsługi boostrapowych rzeczy (patrz w poprzedni link).

O ile się nie mylę wcześniej odpowiedziałeś mi do innego pytania na temat modali. Napisałeś tam, że trzeba napisać funkcje js do obsługi modali. Sam kiedy zrobiłem research internetu to "odkryłem", że bootstrap poprzez podstawowy plik js, który udostępnia, można za pomocą samego czystego bootstrapa (z plikiem js) obsłużyć podstawowy mechanizm wyświetlania modali. Zatem nie trzeba pisać kodu, który nakazuje pokazaniu lub schowanie modala po określonym zdarzeniu tylko wystarczy sam boostrap, który jedynie musi znać id modala i tyle. Po co pisać js skoro mi go już udostępnia go bootstrap.

Dzięki za pomoc, ale nie mogę dać "naj" bo nie chcę, aby inni ludzie myśleli, że te twoje "głupoty" to prawda. Radzę trochę pomyśleć zanim się coś napisze...

Sorry za taką krytykę, ale nie mogłem być obojętny wobec tego.

Dziękuje jeszcze raz za pomoc!

PS

Funkcja, która odpowiada za walidacje, napisałem na podstawie tych dwóch źródeł:

https://www.codeply.com/go/oPUDdgN6CK/bootstrap-4-validation

https://designmodo.com/validate-forms-bootstrap/