Korzystanie z thymeleaf, aby wyświetlić komunikat o błędzie, zmienia układ mojej formularza logowania

Question 1

Używam Thymeleaf do wyświetlania komunikatu o błędzie w formularzu logowania po wprowadzeniu nieprawidłowych danych logowania:

<body>
  <div class="container">
    <form class="form" id="login" th:action="@{/login}" method="post">
      <h1 class="form__title">Login</h1>
      <div th:if="${param.error}" class="form__message form__message-error">
        invalid username or password
      </div>
  </div>
</body>

Ponieważ jest to komunikat o błędzie div pojawia się tylko po wprowadzeniu nieprawidłowych danych logowania, moja forma zmienia swój układ - pola wprowadzania poruszają się w dół. Ja tego nie chcę. Chcę, aby forma wyglądała tak samo w każdym przypadku, tylko komunikat powinno być napisane lub usunięta. Czy ktoś wie, jak to osiągnąć?

Question 2

th:if będzie tylko dodawać <div> kiedy error parametr zapytania jest. Aby zrobić to, co chcesz, musisz użyć CSS, albo mieć pusty div, lub wyświetlić jakiś tekst, korzystając z th:classappend aby wybrać klasę CSS do użytku.

Coś takiego:

<body>
  <div class="container">
    <form class="form" id="login" th:action="@{/login}" method="post">
      <h1 class="form__title">Login</h1>
      <div th:classappend="${param.error}?'show':'hide'" class="form__message form__message-error">
        invalid username or password
      </div>
  </div>
</body>

Z .show i .hide klasy zdefiniowane w swoim CSS.

Wim Deblauwe · Answer 1 · 2021-11-23T15:11:56

th:if będzie tylko dodawać <div> kiedy error parametr zapytania jest. Aby zrobić to, co chcesz, musisz użyć CSS, albo mieć pusty div, lub wyświetlić jakiś tekst, korzystając z th:classappend aby wybrać klasę CSS do użytku.

Coś takiego:

<body>
  <div class="container">
    <form class="form" id="login" th:action="@{/login}" method="post">
      <h1 class="form__title">Login</h1>
      <div th:classappend="${param.error}?'show':'hide'" class="form__message form__message-error">
        invalid username or password
      </div>
  </div>
</body>

Z .show i .hide klasy zdefiniowane w swoim CSS.

wydaje się, że to właśnie to, czego szukam! ... jednak, gdy dodaję ten blok div, spotykam z wyjątkiem TemplateProcessingException: <div th:classappend="${param.error ? 'form--hidden' : 'form--shown'}" class="form__message form__message-error"> invalid username or password </div> ... i w moim css pliku form--hidden po prostu mówi display: none i form-shown mówi display:block
W mojej odpowiedzi była literówka, poprawione teraz. Powinno być ${param.error} ? 'form--hidden' : 'form--shown' w twoim przypadku.
ach, dziękuję bardzo, Wim! Teraz to działa. Tylko forma nadal zmienia swój rozmiar. Ale myślę, że to chyba ma coś wspólnego z moim css. Dziwne, choć myślałem, że div wciąż tam jest, nawet jeśli wyświetlacz = nie.

Korzystanie z thymeleaf, aby wyświetlić komunikat o błędzie, zmienia układ mojej formularza logowania

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii