00:00
(upbeat music)
00:02
So when we submitted our form and got our error back,
00:07
what actually happened there?
00:08
Well, as expected,
00:09
Vine.js and AdonisJS communicate with one another.
00:12
When Vine.js receives a validation error,
00:14
it's going to report that to AdonisJS.
00:17
And AdonisJS is going to validate that error
00:19
into an HTTP response automatically
00:21
based on the accept header value using content negotiation.
00:25
Meaning, if you were to submit your request
00:27
with an application JSON accept header,
00:30
you'll get back a JSON based response.
00:32
If you submit it with an application NVD API plus JSON header,
00:36
you'll get back a response formatted specifically
00:38
for the JSON API spec.
00:40
And then if you submit a server rendered form,
00:43
as we have in our last lesson,
00:44
it will use the session package to submit back
00:47
a flash message summary of our errors.
00:50
If none of the above is true,
00:51
it will just submit back in plain text.
00:53
So following this logic,
00:54
our errors were submitted back to us
00:56
via the session package as flash message errors.
00:59
So if we dive back into our application,
01:01
hide that back away and jump back into our register page,
01:04
let's inspect exactly what we're getting.
01:07
So before all of our fields,
01:08
let's do double curly braces, inspect.
01:11
And there's a global property called flash messages
01:13
that contains all flash messages.
01:15
And it also has some properties
01:17
that help us work directly with our flash messages as well.
01:20
Things like has to check whether or not
01:22
flash messages has a particular value
01:25
to get a particular flash message
01:26
and also all so that we can get all flash messages.
01:29
So let's inspect the all response
01:31
whenever we submit our form with invalid data.
01:34
At present, you can see it's just an empty object
01:36
because it has nothing inside of it.
01:38
For our full name, we'll continue along our same path.
01:40
Our email, we'll use our [email protected]
01:43
that already exists inside of our database
01:45
and we'll type in some password.
01:46
Actually, let's take our password
01:47
underneath eight characters so that fails as well.
01:49
So we would expect our email to fail
01:51
with our uniqueness check
01:52
because we're submitting a non-unique email
01:54
and we're also expecting our password to fail
01:56
the min length requirement
01:58
that we've added of eight characters.
01:59
So whenever we hit register here,
02:01
we're redirected back and we can see
02:02
that our flash messages contains a few things for us.
02:05
We have our full name and email that we've submitted.
02:08
Password has been omitted here for security sake.
02:10
And then we have our input error bag,
02:12
which contains errors specifically
02:14
for our HTML input fields.
02:16
Then we have generalized errors down here as well.
02:18
These also contain our input errors,
02:20
but our input errors is specifically
02:22
just for the input errors,
02:23
whereas errors is for general errors as a whole.
02:25
Within both of these errors,
02:26
we see that our email has failed
02:28
because the email has already been taken
02:30
and the password has failed
02:31
because the password field
02:32
must have at least eight characters.
02:34
So what's returned back to us
02:35
are the actual validation error messages
02:38
that we can then display back to the user directly.
02:40
So if we hide our browser back away,
02:42
get rid of our inspect call
02:43
and let's start with just our email here at first.
02:45
So there's a global flash messages property
02:47
made available by AdonisJS via the session package.
02:50
So we can do @if flash messages
02:53
and inside of our has method,
02:54
all that we wanna do is specify the identifier
02:56
specifically for our error.
02:58
So for this, we can reach inside of our errors object
03:01
and then we can use a dot based syntax
03:02
to specify that we wanna reach inside of that errors object
03:05
and check specifically for the email key
03:07
inside of that object.
03:08
So if our flash messages has an errors.email value,
03:12
then we'll end our if and we'll want to display that error.
03:16
So we can use double curly braces,
03:17
reach for our flash messages and then get that error.
03:21
So errors.email.
03:23
And as we just saw, this will return back as an array.
03:25
So lastly, we can join that
03:27
as a comma delimited list of errors.
03:29
Okay, we'll give that a save.
03:30
Let's jump back into our browser
03:31
and try submitting once more.
03:32
So john [email protected]
03:34
because that already exists inside of our database,
03:36
we wanna test our failures
03:37
and we haven't quite added our error yet for our password,
03:40
but we'll enter whatever in for there.
03:41
Okay, let's run this and there we go.
03:43
So now we can see that our email has already been taken.
03:45
Perfect, so we're getting our validation error.
03:47
Since find, Adonis and edge all work together in synchrocy,
03:51
we can actually use a utility to make this call
03:53
a little bit easier as well.
03:54
So let's hide our browser back away
03:55
and instead of doing all of this boilerplate work,
03:57
we can instead use some helpers.
03:59
So there's an input error helper tag.
04:01
It's going to use that input errors bag
04:03
that we saw whenever we inspected our flash messages
04:05
to determine whether or not we have an error available.
04:07
So this is going to work similar to an if check.
04:10
So we can jump down here and end that tag.
04:12
Inside of this method,
04:13
we want to provide back just the input name
04:15
that we want to check against, which would be our email.
04:18
And then this input error,
04:19
if it determines that we have an error
04:21
to display for our email,
04:22
we'll inject that errors array
04:25
directly inside of this tag as dollar sign messages.
04:29
So if we want to display all messages,
04:31
we could loop over them
04:32
or we could just join them together
04:33
as a common delimited list.
04:35
And so now we can use this rather than all of this
04:38
to display our error messages.
04:40
Furthermore, we can just copy this,
04:41
paste it down on our password,
04:43
update the field name to password
04:44
to match the name of the actual field
04:46
that we're using or the input.
04:47
And then let's do the same thing here for our full name.
04:49
So full name there.
04:51
Awesome.
04:52
So now we have input error handlers
04:53
added in for all of our registration inputs.
04:55
So if we dive back into our browser,
04:57
let's type this out once more.
04:58
So [email protected]
05:01
and some not quite a character value for our password.
05:04
Hit enter, and there we go.
05:05
So now we get the email has already been taken still
05:07
for our email and the password field
05:09
must have at least eight characters for our password.
05:11
We can style that up a little bit as well
05:13
by providing whatever we want inside of this input error.
05:15
So we could do, let's say a paragraph with class text,
05:19
extra small text, red 500,
05:21
and plop the value inside of there.
05:23
And since all of these use that same messages,
05:25
dollar sign join,
05:26
we could just give this whole thing a copy
05:28
and paste that into each one of our errors.
05:30
And if you're thinking ahead,
05:31
you can probably already start to guess
05:32
how we can compose this label, span, input,
05:35
and error all into a component.
05:37
But if you're not quite there,
05:38
we'll take a look at that here in a little bit.
05:40
Okay, so let's jump back into our browser.
05:41
Give this one more test.
05:42
So [email protected]
05:45
and some password, not quite eight characters.
05:47
Hit enter, and there we go.
05:48
So now the text is smaller and it's red.
05:51
Before we move onward though,
05:52
we can actually simplify our validation logic as a whole
05:55
inside of a register controller as well.
05:57
So currently we're using the actual validation schema
05:59
to perform our validation
06:01
and providing in that data manually.
06:02
Well, since AdonisJS and Find.js work great together,
06:05
Find.js is actually available directly on a request
06:08
and it will be able to automatically pluck
06:09
our request data out for us.
06:11
And then all that we need to do is specify the schema
06:13
that we want to validate with.
06:15
Kind of just inversing the flow
06:16
of what we have going on here.
06:17
So let's do that up here at the top.
06:19
So you can do const data.
06:21
We'll ignore that red squiggly here
06:22
since we've already defined data.
06:24
And we can await request.validateUsing.
06:28
And then all that we need to do
06:29
is provide it the validator that we want to validate with,
06:31
which would be our register validator.
06:34
The request will then pluck the data
06:36
off of our request itself,
06:38
provide it into our validator to validate with,
06:40
and then kick back that response to us
06:43
with that same validated type that we saw earlier.
06:45
This means that this line here is now our step one
06:48
as that's grabbing our request data and validating it.
06:51
So we can get rid of this line here as a whole.
06:53
And then for our createUser step,
06:54
we now have access to that same data right here.
06:57
So we can just provide in data there.
06:59
We no longer need to validate it again.
07:01
Simplifying our logic flow here a little bit.
07:03
Let's jump back into our browser one more time
07:05
just to make sure that all of this worked.
07:06
We'll give it a refresh.
07:07
Type in john [email protected]
07:10
and some invalid password.
07:12
Run there and everything still works A-okay.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!