ใช้ thymeleaf เพื่อให้มีการแสดข้อผิดพลาดเกิดขึ้นระหว่างข้อความ alters ที่ผังแป้นพิมพ์ของฉันรูปแบบการล็อกอิน

Question 1

ฉันใช้ Thymeleaf เพื่อให้มีการแสดข้อผิดพลาดเกิดขึ้นระหว่างข้อความของรูปแบบการล็อกอินเมื่อเข้าสู่ผิดบัตร:

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

ตั้งแต่เกิดข้อผิดพลาดข้อความ div เดียวที่ดูเหมือนเมื่อเข้าสู่ผิดบัตรของฉันรูปแบบเปลี่ยนแปลงผังแป้นพิมพ์ที่ในช่องข้อมูลที่ได้รับเคลื่อน downwards. ฉันไม่ต้องการแบบนี้หรอก ฉันต้องการแบบฟอร์มเหมือนในเหมือนกันทางเดียวที่จดหมายที่ควรจะได้เขียนถึงหรือกลบออกไป. มีใครรู้วิธีที่จะประสบความสำเร็จในส่วนนี้?

Question 2

th:if มีแต่จะเพิ่ม <div> ตอนที่ error พารามิเตอร์ร้องขออยู่ในนั้นทั้งหมด ต้องทำในสิ่งที่คุณต้องการคุณควรจะใช้ CSS ที่ต้องการที่ว่างเปล่า div หรือแสดงคข้อความโดยใช้ th:classappend เพื่อเลือกของ CSS เรียนเพื่อประโยชน์หรอก

บางอย่างเหมือน:

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

กับ .show แล้ว .hide เรียนกำหนดไว้ใน CSS ของคุณ.

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

th:if มีแต่จะเพิ่ม <div> ตอนที่ error พารามิเตอร์ร้องขออยู่ในนั้นทั้งหมด ต้องทำในสิ่งที่คุณต้องการคุณควรจะใช้ CSS ที่ต้องการที่ว่างเปล่า div หรือแสดงคข้อความโดยใช้ th:classappend เพื่อเลือกของ CSS เรียนเพื่อประโยชน์หรอก

บางอย่างเหมือน:

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

กับ .show แล้ว .hide เรียนกำหนดไว้ใน CSS ของคุณ.

ดูเหมือนว่านี่จะเป็นแค่สิ่งที่ฉันกำลังมองหา! ...ตอนที่ฉันเพิ่ม div บล็อคถึงแม้ว่าฉันวิ่งหนีเข้าไปใน TemplateProcessingException: <div th:classappend="${param.error ? 'form--hidden' : 'form--shown'}" class="form__message form__message-error"> invalid username or password </div> และในของแฟ้ม css ขอ form--hidden แค่บอกว่า display: none แล้ว form-shown บอกว่า display:block
นั่นเป็น typo นมาซ่อมตอนนี้ตกอยู่ในคำตอบของฉันแล้ว ควรจะเป็น ${param.error} ? 'form--hidden' : 'form--shown' ในกรณีของคุณ
อ้าขอบคุณมาก Wim! ตอนนี้มันได้ผล แต่แบบฟอร์มยังคงเปลี่ยนแปลงของมันขนาดด้วย แต่ฉันคิดว่ามันอาจจะมีบางอย่างที่เกี่ยวกับ css ของฉัน. มันแปลกๆถึงแม้ว่าฉันคิดว่าฉันเห็นมัน div นเป็นยังอยู่แม้ว่าจะมีการแสด=ไม่เลย
ใช้ visibility:hidden แทนที่จะเป็น

ใช้ thymeleaf เพื่อให้มีการแสดข้อผิดพลาดเกิดขึ้นระหว่างข้อความ alters ที่ผังแป้นพิมพ์ของฉันรูปแบบการล็อกอิน

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่