À l'aide de thymeleaf pour afficher un message d'erreur modifie la mise en page de mon formulaire de connexion

Question 1

Je suis à l'aide de Thymeleaf pour afficher un message d'erreur sur mon formulaire de Connexion à l'entrée de mauvais identifiants:

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

Depuis ce message d'erreur div ne s'affiche lors de la saisie de faux diplômes, ma forme de ses changements de mise en page - les champs de saisie sont en mouvement à la baisse. Je ne veux pas de cela. Je veux que le formulaire de regarder la même dans les deux cas, seul le message est censé être écrit ou supprimés. Quelqu'un sait-il comment faire?

Question 2

th:if ne fera qu'ajouter de la <div> lorsque l' error paramètre de la requête est là. Pour faire ce que vous voulez, vous devez utiliser les CSS pour disposer d'un div vide ou afficher du texte à l'aide de th:classappend pour sélectionner la classe CSS à utiliser.

Quelque chose comme:

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

Avec .show et .hide les classes définies dans votre CSS.

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

th:if ne fera qu'ajouter de la <div> lorsque l' error paramètre de la requête est là. Pour faire ce que vous voulez, vous devez utiliser les CSS pour disposer d'un div vide ou afficher du texte à l'aide de th:classappend pour sélectionner la classe CSS à utiliser.

Quelque chose comme:

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

Avec .show et .hide les classes définies dans votre CSS.

cela semble être exactement ce que je cherche! ... quand j'ai ajouter ce bloc div, je suis en cours d'exécution dans un TemplateProcessingException: <div th:classappend="${param.error ? 'form--hidden' : 'form--shown'}" class="form__message form__message-error"> invalid username or password </div> ... et dans mon fichier css form--hidden dit simplement: display: none et form-shown dit display:block
Il y avait une faute de frappe, fixe maintenant dans ma réponse. Devrait être ${param.error} ? 'form--hidden' : 'form--shown' dans votre cas.
ah, merci beaucoup Wim! Maintenant, c'est de travailler. Seulement, la forme est toujours en évolution de sa taille. Mais je suppose qu'il a probablement quelque chose à voir avec mon css. C'est étrange mais je pensais le div est toujours là, même si display = none.

À l'aide de thymeleaf pour afficher un message d'erreur modifie la mise en page de mon formulaire de connexion

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie