So this time around, we want to change our front end, which is found in bronze dash plan page go HTML,
inside the templates folder, inside the web folder where you want to use our validation.
So here in the fetch and in my code, it's line one sixty four.
This is where we call APIs create customer and subscribe to plan.
Well obviously the first thing we want to do is to check, to see if there's an error.
So we'll say if data error is exactly equal to false, then we'll do what we've been doing right along.
So we'll wrap that here, tab all that in and we can get rid of this council log data.
We don't need that anymore or else something went wrong.
And I'm going to assume for the sake of argument right now, that validation failed.
OK, so what I'll do here is, first of all, I want to obviously make some changes.
So is my application running?
Yes, it is.
So if I go over here right now and I fill out this form, it's going to change all of these to green.
Everything looks great.
Then it calls fetch because it has a client side validation first, then it calls fetch.
And of course, I don't want the problematic things to stay green.
So the very first thing I'm going to do here in my clothes is say remove the bootstrap class was validated
from the entire form.
I can do that really easily.
Document element, but ID and my form is called charge
underscore form and I'll get its class list and I'll remove was validated.
OK, so that will get the form back to no green, no red.
It's just a basic form.
Now I want to get all of the information that's inside data errors.
And you remember that's a map.
So in JSON that's just going to be a list surrounded by curly brackets so I can use object dot entries
to get the values that are in data errors and turn them into something I can use for each one.
And the foreach I'll say and I'll wrap the first parameter in passing in parentheses.
I want to execute this on every single entry in the errors part of my data object.
So I'll declare a constant key and value and that will be populated from I, which I passed to the inside
of this foreach loop.
OK, now for right now, let's just say console that log and log using JavaScript templates key.
And that's equal to the value on that close it with a back tick and put a semicolon there.
So let's save this.
Let's stop our application, make stop, make a start, OK?
And see what we get back.
Make sure this actually works.
So everything is running now, so go back to my Web browser.
I'll open my JavaScript terminal and I'll reload this page and I will clear the JavaScript console and
I'll put it revalidate in there X.
That's only one character along.
The rest of it doesn't matter.
This has to be an email, otherwise it won't pass client client side validation.
But exit X.com a work name X an our test credit card number zero for say thirty three three three three.
So if we get everything right I should get something written to the JavaScript console.
And there it is, first underscore name must be at least two characters, and of course, this keeps
spinning because we haven't told it to do anything else.
Well, that's fine.
At least I know I'm getting my errors back in the correct format.
And looping through them appropriately in JavaScript, so now we do have one thing we're going to have
to change here, and it's pretty simple in handler's Dash API, when I do my validation, I'm passing
the first parameter as first underscore name and back in our JavaScript console, that's exactly what
we got first underscore name.
If we look at our form back on brons dash planned page, go out and we find the part where you enter
first name.
I need to do something with this.
I want to change the way that everything in here appears.
In other words, I want to give it the red outline.
I want to display some text underneath it.
I actually want to give more information, which means I need to get a reference to it.
And of course, I used ID first Dasch name and name, first underscore name.
So I need to be consistent here.
So what I'm going to do is change every occurrence of first name to first underscore name, so I will
copy it and change it everywhere it exists here.
So this becomes an underscore.
Doesn't matter for that one, but I like to be consistent and this becomes an underscore.
And I will just search for first underscore or first dash.
First dash.
So there's one.
So let's fix that.
Make that underscore and find the next one.
There it is.
And find the next one if there's any more.
So that's it.
So down here, now that I'm getting first underscore name and everything, has the idea of first underscore
name where it's needed, I can actually do something.
So rather than just doing a console log now I can say document, don't get element by ID and look for
key and that's going to find me a reference to first underscore name and now we have that ID, so we'll
see ad for a class list.
The ad we want to add is invalid.
OK, and I also want to put some help text underneath it.
If you look at bootstraps forms, go to the forms package here for bootstraps.
We actually have this kind of thing and this right this is right in bootstraps documentation, other
forms of validation and this sort of thing where we have div class equals valid.
Did collective class equals invalid.
I'm going to copy this, copy this one.
Go right back to my ID, go back up to where first name is in my form and I'm just doing first name
and I'll put that right here, which is the same placement that loosestrife has it in their documentation.
I'll just tab that over and I'll give this the ID equal to first underscore name Dasch help.
So now I have a means of getting a reference to this pretty easily.
Go ahead and come back down here.
In my first statement and change that is necessary.
So what I can do is say I'll just duplicate this document, get a little bit, but ID key plus dash
help and that gives me a reference to the text, which can be green or red as necessary.
And what I want to do is remove the class that will automatically be added by bootstrap after it passes
client validation, which is valid feedback that'll make it green.
I'll remove that class, then I'll duplicate this line and say add in valid feedback and I'll duplicate
this and get rid of this part and set its text, its inner text text equal to value whatever we receive
back from the JSON file.
And the last thing I want to do, of course, is let them fix their error.
So I have to say show buttons.
And that's a little function we wrote a while ago that will put everything back the way it should be.
So let's open our terminal and try this out.
Next stop.
Mr..
And see if we get everything right back to our Web browser and we'll go back to bronze plan.
And we'll refresh this.
And away we go, so X invalidated X, the rest of it doesn't matter except X.com ex and four two four
two zero three three three three three three.
Clear the JavaScript console because I often make typos in JavaScript.
And there it is.
OK.
Now, that didn't turn red, so I must have a typo there, but it's pretty close.
This went back to read it highlighted appropriately.
It showed the text.
So let's go fix the last little bit here.
Bring this up, hide that and see what we got wrong here in the violet.
There we go.
Invalid feedback and that will take care of it.
All right.
And hopefully this gives you enough information that you can add as much validation as you need.
The key thing to remember is when you're doing your validation here in your handler, make absolutely
certain that this is the ID of the field in question, OK, because you're going to use that.
And doing that allows me to generalize what I do here in this loop to give the appropriate classes,
to remove the other classes and to set the message that you want displayed to the end user underneath
the field in question.
All right.
Let's move on.