Pomocí thymeleaf se zobrazí chybová zpráva, mění rozložení moje přihlašovací formulář

Question 1

Já používám Thymeleaf zobrazit chybová zpráva na můj Přihlašovací formulář po zadání špatné přihlašovací údaje:

<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>

Protože tato chybová zpráva div se zobrazí pouze po zadání špatných přihlašovacích údajů, mé podobě změny jeho dispozice - vstupní pole jsou pohybující se směrem dolů. Nechci, aby tento. Chci podobě vypadají stejně v obou směrech, pouze zpráva je měl dostat písemné nebo odstraněny. Ví někdo, jak toho dosáhnout?

Question 2

th:if bude pouze přidat <div> když error žádost je parametr. Dělat to, co chcete, měli byste používat CSS buď mají prázdný div, nebo ukázat nějaký text, pomocí th:classappend vyberte CSS třídy k použití.

Něco jako:

<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>

S .show a .hide třídy definované v CSS.

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

th:if bude pouze přidat <div> když error žádost je parametr. Dělat to, co chcete, měli byste používat CSS buď mají prázdný div, nebo ukázat nějaký text, pomocí th:classappend vyberte CSS třídy k použití.

Něco jako:

<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>

S .show a .hide třídy definované v CSS.

to se zdá být jen to, co jsem hledal! ... když jsem přidat tento div bloku, i když, jsem běh do TemplateProcessingException: <div th:classappend="${param.error ? 'form--hidden' : 'form--shown'}" class="form__message form__message-error"> invalid username or password </div> a v css souboru form--hidden jen říká, že display: none a form-shown říká display:block
Tam byl překlep, opraveno, teď v mé odpovědi. By měla být ${param.error} ? 'form--hidden' : 'form--shown' v tvém případě.
aha, díky moc Wim! Teď to funguje. Jen forma se stále mění svou velikost. Ale asi to má něco společného s mým css. Je to divné, ale myslel jsem si div tam byl stále, i když display = none.

Pomocí thymeleaf se zobrazí chybová zpráva, mění rozložení moje přihlašovací formulář

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii