El uso de thymeleaf para mostrar un mensaje de error que altera la disposición de mi formulario de inicio de sesión

Question 1

Estoy usando Thymeleaf para mostrar un mensaje de error en mi formulario de inicio de Sesión al ingresar mal credenciales:

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

Desde este mensaje de error div sólo aparece al entrar mal credenciales, mi forma cambia su esquema de los campos de entrada están moviendo hacia abajo. Yo no quiero esto. Quiero que el formulario tenga el mismo aspecto en cualquier caso, sólo el mensaje debe recibir por escrito o eliminado. ¿Alguien sabe cómo conseguir esto?

Question 2

th:if sólo añadir la <div> cuando el error parámetro de la petición está ahí. Para hacer lo que usted desea, usted debe utilizar CSS para tener un div vacío o mostrar algún texto, el uso de th:classappend para seleccionar la clase CSS a utilizar.

Algo así como:

<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 y .hide las clases definidas en el código CSS.

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

th:if sólo añadir la <div> cuando el error parámetro de la petición está ahí. Para hacer lo que usted desea, usted debe utilizar CSS para tener un div vacío o mostrar algún texto, el uso de th:classappend para seleccionar la clase CSS a utilizar.

Algo así como:

<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 y .hide las clases definidas en el código CSS.

esto parece ser lo que estoy buscando! ... cuando puedo agregar este bloque div aunque, estoy corriendo en un TemplateProcessingException: <div th:classappend="${param.error ? 'form--hidden' : 'form--shown'}" class="form__message form__message-error"> invalid username or password </div> ... y en mi archivo css form--hidden sólo dice: display: none y form-shown dice display:block
Hubo un error tipográfico, fijo ahora en mi respuesta. Debe ser ${param.error} ? 'form--hidden' : 'form--shown' en su caso.
ah, muchas gracias Wim! Ahora se está trabajando. Sólo, el formulario todavía cambia su tamaño. Pero supongo que es probable que tenga algo que ver con mi css. Es extraño, aunque yo estaba pensando en el div todavía estaba allí, incluso si la pantalla = ninguno.

El uso de thymeleaf para mostrar un mensaje de error que altera la disposición de mi formulario de inicio de sesión

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría