Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Capturing Form Validation Errors

6:08 with Chris Ramacciotti

After adding some annotation constraints to our Category class, we cover the code necessary for triggering validation and capturing errors.

Teacher's Notes
Video Transcript
Downloads

Git Command to Sync Your Code to the Start of this Video

git checkout -f s4v3

Using Github With This Course

You can complete this course entirely using code created by you on your local machine. However, if you choose to use the code I've made available to you, you have two options:

Use the project files linked at the bottom of this page, or
Use the Github repository I've made available (recommended)

If you choose the recommended option of using the Github repository, it can be found at

https://github.com/treehouse/giflib-hibernate

To utilize Github with this course, you can download the Github desktop client for your system or use the command line interface provided with Git.

Clone this repository to your machine using the Github desktop client, or using the following command:

git clone git@github.com:treehouse/giflib-hibernate.git

To update your local repository to match a video's starting point, you can use the git checkout command in combination with the stage and video number. For example, to update your local repository to match the starting point of Stage 5, Video 4, you'd use the following:

git checkout -f s5v4

Notice the use of the -f option. This forces Git to override all local changes, so be aware: this will cause any changes you made to be lost.

Regular Expressions Reference

The process of adding form validation in Spring is threefold. 0:00

First, we'll annotate the entity class' fields with JPA validation annotations, 0:04

which come from the javax.validation.constraints package. 0:10

Then, we'll capture validation in what's called 0:14

a BindingResult in the controller final. 0:16

If there are validation errors, we'll redirect back to the form and 0:20

display those validation errors. 0:23

Let's get started by adding those validation annotations and by redirecting 0:26

back to the form without adding the category when errors are encountered. 0:30

The first step I mentioned was adding validation annotations and 0:36

we'll do that in the entity classes. 0:39

Let's head to the category class. 0:41

So under the model package, I will open the category class. 0:43

Here, I'll demonstrate just a few of the annotations we can use. 0:47

Let's start with the name field. 0:51

Let's make a decision that the value has to be present and 0:54

that its length must be between, say, three and twelve characters. 0:57

You can change this, if you'd like. 1:01

To do this, we'll add the NotNull annotation, 1:03

which will ensure that it's not blank, as well as the Size annotation. 1:06

And here, we can specify a minimum and maximum value. 1:12

So I'll say min = 3 and max = 12. 1:18

Next, let's add validation annotations for the colorCode field. 1:22

So I'll do that right here. 1:26

This value should be a valid hexadecimal color code as used in CSS, so 1:29

let's mark it as NotNull, so we make sure it's provided, and to ensure 1:33

that the value is a valid hexadecimal value, let's use the Pattern annotation. 1:40

Now, I'm going to use a regular expression here on which we could have an entire 1:46

course. 1:50

Check the teacher's notes for more regular expression info, and just note for 1:51

our purposes here, that regular expressions can be used to 1:56

intelligently detect patterns in strings. 2:00

So, I will start with the regular expression element in the annotation here. 2:04

And as far as the pattern I'm checking for, I'll enclose that in quotes. 2:10

I'd like it to start with a hash sign cuz a hex code in CSS starts with a hash sign. 2:14

And have each subsequent character come from the character class of either zero 2:19

through nine, lowercase a through f, uppercase A through 2:24

F, and I'd like that to be repeated six times. 2:30

And it looks like my right bracket snuck in there, as well. 2:36

There was IntelliJ doing all the work for me. 2:40

Okay. 2:44

That's all I'd like to validate in this entity. 2:44

Next, we'll go to the category controller to trigger validation and 2:47

capture the results. 2:51

Here, we'll focus on the add category method, which is down a bit, there we go. 2:53

What I'd like to do here is first trigger validation according to the constraints we 3:00

just added to the category entity. 3:03

And it turns out, this is really simple. 3:05

We add a valid annotation to the category parameter. 3:08

So this category parameter, before, we add the Valid annotation. 3:12

And just like that, it will trigger validation, 3:17

according to the constraints that we put on the category class. 3:19

Next, we'll need a way to capture errors, and in Spring, 3:24

this is most easily accomplished by including a binding result parameter, so 3:27

I’ll add that after the category parameter, BindingResult, 3:31

and I’ll just call it, result. 3:35

Now what we need to do is actually take alternate action if errors are found, 3:38

such as redirecting back to the form. 3:42

To detect errors, we can use an if statement. 3:45

I'll do that before our categories save. 3:48

So we can say if the result has errors, 3:50

what we can do here is redirect back to the form. 3:55

And to do that, we'll return a redirect back to the you URI that's used 4:03

to render the form, remember, this is not the name of the Thymeleaf view, but rather 4:09

the URI that will need to be requested in order for the form to be rendered. 4:15

Okay. 4:21

We're ready to test this. 4:22

Let's reboot and try to add a category with invalid data. 4:23

So I’m going to stop my current instance of my app, and 4:27

then I can reboot that thing, and 4:32

we'll wait for the app to both compile and fully boot. 4:36

There we go, application started, I'll switch back to Chrome. 4:41

Let me first try to add a category without supplying any data whatsoever. 4:45

So I'll add a category, and there we are, right back at the form, it may look like 4:50

nothing happened, but I certainly clicked add and got right back to the form. 4:55

Let me add a two character category name, and a color. 5:00

Remember, we said that the category name had to be between three and 5:04

twelve characters in length. 5:08

So I'll say Sp, and then I'll choose Blue, and click Add. 5:10

And once again, we're right back at the form, and 5:16

finally, let's make sure that we can successfully add a category if we do, 5:18

indeed, provide valid data for all fields. 5:24

So, I will type Spring here. 5:27

I'll choose Blue, why not, and click Add. 5:30

Great, there it is. 5:35

Now we still have more work to do, but 5:37

you're well on your way to fully implemented form validation. 5:38

So we've taken the critical step of introducing server side validation 5:42

into the flow of our application data, but we left out another critical piece. 5:46

When our form was re-displayed, we offered no indication that there was an error. 5:51

This could certainly leave users confused as to what just happened. 5:56

So next, we'll add form validation messages that tell users 5:59

exactly what went wrong when something does go wrong. 6:03

You need to sign up for Treehouse in order to download course files.

Sign up