Utilizzando thymeleaf per visualizzare un messaggio di errore altera il layout della mia form di login

Question 1

Sto usando Thymeleaf per visualizzare un messaggio di errore sul mio form di Login entrando credenziali errate:

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

Dal momento che questo messaggio di errore div viene visualizzato solo entrando credenziali errate, la mia forma cambia layout - i campi di input sono in movimento verso il basso. Io non voglio questo. Voglio il modulo ha lo stesso aspetto in ogni modo, solo il messaggio dovrebbe essere scritti o cancellati. Qualcuno sa come ottenere questo risultato?

Question 2

th:if sarà solo aggiungere il <div> quando il error parametro di richiesta c'è. Per fare quello che si vuole, si dovrebbe utilizzare i CSS per avere un div vuoto o visualizzazione del testo, utilizzando th:classappend per selezionare la classe CSS per uso.

Qualcosa di simile a:

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

Con .show e .hide le classi definite nel CSS.

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

th:if sarà solo aggiungere il <div> quando il error parametro di richiesta c'è. Per fare quello che si vuole, si dovrebbe utilizzare i CSS per avere un div vuoto o visualizzazione del testo, utilizzando th:classappend per selezionare la classe CSS per uso.

Qualcosa di simile a:

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

Con .show e .hide le classi definite nel CSS.

questo sembra essere proprio quello che sto cercando! ... quando ho aggiunto questo div blocco, anche se, sono in esecuzione in un TemplateProcessingException: <div th:classappend="${param.error ? 'form--hidden' : 'form--shown'}" class="form__message form__message-error"> invalid username or password </div> ... e nel mio file css form--hidden dice solo display: none e form-shown dice display:block
C'è stato un errore di battitura, fissato ora nella mia risposta. Dovrebbe essere ${param.error} ? 'form--hidden' : 'form--shown' nel tuo caso.
ah, grazie mille Wim! Ora si sta lavorando. Solo, il modulo cambia la sua dimensione. Ma credo che probabilmente ha qualcosa a che fare con il mio css. E ' strano però stavo pensando che il div è ancora lì, anche se il display = none.

Utilizzando thymeleaf per visualizzare un messaggio di errore altera il layout della mia form di login

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria