Hello, in this video, we are going to take a look at implementing validation in bootstrap forms,
so I will provide a link to the official bootstrap page, which shows you all the different ways of
doing validation, the different ways I will cover the basics and you'll be a good foundation for you
to proceed.
So, so far, we don't even have a summit button.
So let's let's do that as one of the first first tasks and the Saturday's class told us, well, you
can add any sort button story you want.
I'm going to keep it simple, have a button tag.
I'm going to have a class of BTM Beatty and Dash Danger, and that's just for the styling.
And then I will type, which is mix.
And I want to have the text submitted here.
So far we know.
Do we get this for you?
Might we have to brief and see the web?
If you look here, the website is, you know, just a little bit reloading because it is going to go
to the top of the form.
There's no action here.
If there was an action, if we could specify what we know, where we want to go to, if we don't specify,
it just submits back to this page you would obviously use back in technology like P or Python to actually
get that data and do something with it.
But this is just about the front end stuff.
So let's say we wanted the email address to be a mandatory filter on or input.
Where is this?
Where is this whatever it is and if that's mandatory, put requited like so.
And I'm also going to have this mandatory down here.
So again, it is totally up to you what you choose to be mandatory.
This is what we're using.
So if I click submit, we get this now.
So if I was to try and do this, if I needs to include an email address, the reason it says that is
because the type is e mail.
So that's just a browser, the default check.
So let me go with that click submit this method.
None of this is moanin because we d aren't required for I put something in here, this just needs to
have some character elect me.
So obviously you can use JavaScript to get that data you pay to get it.
You can validate in clients.
I'm always validating server side as well.
So that's just the bread, the default validation.
You can also do some extra validation which allows, I mean not extra validation, say alternative validation
and show you a different style.
So what we are going to do is show you what I'm going to show you how to put customer feedback.
So for put a div, we're going to put class invalid feedback.
We can provide feedback as well.
So feel free to check that out on the bootstrap website for more information.
And in here on the site, incorrect email address.
And I'll also do it for.
This one incorrect username.
OK, so currently, if I want to try and submit it still to the bread, the default to the couple of
more things that we need to do, we need to add some data here.
What we are going to do is add a class of needs.
That's validation.
They're going to say no validation, no.
Let's see what it does.
If I reload like this, you know, nothing is appearing there.
So the reason for that is we need to actually sort of set this up in a JavaScript.
So we need to initiate all of this stuff for the script tag.
If you have a separate JavaScript file, feel free to actually use that one to put your code in to keep
you nice and tidy.
This is a very simple page, some putting it all on the same page.
OK, so vol form.
So you're going to get any form on the page using query selector rule based on the class.
It is this class.
You need a valley type of copy that.
And you need to put a dot to indicate what you are checking is a for a class, they're going to say
Iran dot prototype, DOPs life dot com.
And on all the forms, I'm going to say for each one, we're going to essentially call this method on
each of them.
There's going to be the form in here.
So this is the individual thing from the array,
which is the way I like to format either way.
And in here, the three four.
So this is each individual form in our case is only one.
But this just in case of multiple, which is more than possible.
Add event listener and the event listener is going to be simit.
So when it has been submitted, I'm going to call this function now with event.
So this is the default event that is happening.
And in here, this event to prevent default, which is submitting it event dot stop propagation just
to stop the touch event, the submission event going down in cases of below it.
And we're also not in here.
Sorry,
this is this is meant to be an exchange on my back.
So if the form is invalid, check needed to the need to spell correctly is not valid.
Only then would we want to prevent the default and stop the propagation.
Otherwise we would continue with submitting to whatever action have been implemented.
Next we're going to say form the class list.
That ad was done valid to
semicolon and in here the form we're going to false line and that should be all good to go below.
Click that then we go anything else because it doesn't require data.
They automatically have succeeded.
But now we get this error incorrect email address.
We can't see formatting.
However, we want to put something in here still.
You know, it's not valid if I do that now, it is valid and I'm going to put something in here.
We're all good and we can submit it.
That is it for validation.
OK, I said do a lot more information on the bouchra website.
Feel free to go over this and have a look.
If you have any questions, feel free to publish your message on discord on my website or social media
or links and everything, even the description and on the channel.
And I look forward to seeing you in the next awesome video.