Using Thymeleaf to display error messages

gildedgardenia · gildedgardenia · commit 545158897a35 · 2023-07-28T13:29:28.000-05:00
diff --git a/src/main/java/org/launchcode/codingevents/controllers/EventController.java b/src/main/java/org/launchcode/codingevents/controllers/EventController.java
@@ -37,7 +37,6 @@ public String processCreateEventForm(@ModelAttribute @Valid Event newEvent,
                                          Errors errors, Model model) {
         if(errors.hasErrors()) {
             model.addAttribute("title", "Create Event");
-            model.addAttribute("errorMsg", "Bad data!");
             return "events/create";
         }
 
diff --git a/src/main/java/org/launchcode/codingevents/models/Event.java b/src/main/java/org/launchcode/codingevents/models/Event.java
@@ -26,14 +26,16 @@ public class Event {
     private String contactEmail;
 
     public Event(String name, String description, String contactEmail) {
+        this();
         this.name = name;
         this.description = description;
         this.contactEmail = contactEmail;
+    }
+
+    public Event() {
         this.id = nextId;
         nextId++;
     }
-
-    public Event() {}
     public String getName() {
         return name;
     }
diff --git a/src/main/resources/static/styles.css b/src/main/resources/static/styles.css
@@ -1,3 +1,7 @@
 body {
   font-size: 18px;
+}
+
+.error {
+  color: red;
 }
diff --git a/src/main/resources/templates/events/create.html b/src/main/resources/templates/events/create.html
@@ -10,18 +10,21 @@
 <form method="post">
     <div class="form-group">
         <label>Name
-            <input type="text" name="name" class="form-control">
+            <input th:field="${event.name}" class="form-control">
         </label>
+        <p class="error" th:errors="${event.name}"></p>
     </div>
     <div class="form-group">
         <label>Description
-            <input type="text" name="description" class="form-control">
+            <input th:field="${event.description}" class="form-control">
         </label>
+        <p class="error" th:errors="${event.description}"></p>
     </div>
     <div class="form-group">
         <label>Contact Email
-            <input type="text" name="contactEmail" class="form-control">
+            <input th:field="${event.contactEmail}" class="form-control">
         </label>
+        <p class="error" th:errors="${event.contactEmail}"></p>
     </div>
     <div class="form-group">
         <input type="submit" value="Create" class="btn btn-success">
diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html
@@ -5,6 +5,7 @@
   <title>Coding Events</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
+  <link rel="stylesheet" th:href="@{/styles.css}">
 </head>
 <body>
 

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,6 @@ public String processCreateEventForm(@ModelAttribute @Valid Event newEvent,`
`37`	`37`	`Errors errors, Model model) {`
`38`	`38`	`if(errors.hasErrors()) {`
`39`	`39`	`model.addAttribute("title", "Create Event");`
`40`		`- model.addAttribute("errorMsg", "Bad data!");`
`41`	`40`	`return "events/create";`
`42`	`41`	`}`
`43`	`42`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`body {`
`2`	`2`	`font-size: 18px;`
	`3`	`+}`
	`4`	`+`
	`5`	`+.error {`
	`6`	`+ color: red;`
`3`	`7`	`}`
-Original file line number
+Diff line change
   <title>Coding Events</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
 +  <link rel="stylesheet" th:href="@{/styles.css}">
 </head>
 <body>