1 00:00:01,470 --> 00:00:08,570 Hello, in this video, we are going to take a look at implementing validation in bootstrap forms, 2 00:00:08,790 --> 00:00:14,670 so I will provide a link to the official bootstrap page, which shows you all the different ways of 3 00:00:14,670 --> 00:00:22,140 doing validation, the different ways I will cover the basics and you'll be a good foundation for you 4 00:00:22,140 --> 00:00:24,360 to proceed. 5 00:00:24,600 --> 00:00:28,090 So, so far, we don't even have a summit button. 6 00:00:28,350 --> 00:00:38,880 So let's let's do that as one of the first first tasks and the Saturday's class told us, well, you 7 00:00:38,880 --> 00:00:41,750 can add any sort button story you want. 8 00:00:41,760 --> 00:00:44,760 I'm going to keep it simple, have a button tag. 9 00:00:45,360 --> 00:00:57,250 I'm going to have a class of BTM Beatty and Dash Danger, and that's just for the styling. 10 00:00:57,360 --> 00:00:59,940 And then I will type, which is mix. 11 00:01:00,300 --> 00:01:03,180 And I want to have the text submitted here. 12 00:01:03,540 --> 00:01:04,470 So far we know. 13 00:01:04,470 --> 00:01:06,090 Do we get this for you? 14 00:01:06,090 --> 00:01:07,650 Might we have to brief and see the web? 15 00:01:07,650 --> 00:01:16,740 If you look here, the website is, you know, just a little bit reloading because it is going to go 16 00:01:16,740 --> 00:01:17,730 to the top of the form. 17 00:01:17,910 --> 00:01:19,320 There's no action here. 18 00:01:19,530 --> 00:01:25,140 If there was an action, if we could specify what we know, where we want to go to, if we don't specify, 19 00:01:25,140 --> 00:01:32,160 it just submits back to this page you would obviously use back in technology like P or Python to actually 20 00:01:32,160 --> 00:01:35,130 get that data and do something with it. 21 00:01:35,130 --> 00:01:37,530 But this is just about the front end stuff. 22 00:01:37,920 --> 00:01:43,680 So let's say we wanted the email address to be a mandatory filter on or input. 23 00:01:43,830 --> 00:01:44,790 Where is this? 24 00:01:45,000 --> 00:01:51,020 Where is this whatever it is and if that's mandatory, put requited like so. 25 00:01:51,420 --> 00:01:54,990 And I'm also going to have this mandatory down here. 26 00:01:55,470 --> 00:02:00,620 So again, it is totally up to you what you choose to be mandatory. 27 00:02:01,890 --> 00:02:04,800 This is what we're using. 28 00:02:04,830 --> 00:02:07,990 So if I click submit, we get this now. 29 00:02:08,070 --> 00:02:16,290 So if I was to try and do this, if I needs to include an email address, the reason it says that is 30 00:02:16,290 --> 00:02:19,650 because the type is e mail. 31 00:02:19,650 --> 00:02:22,360 So that's just a browser, the default check. 32 00:02:22,710 --> 00:02:27,770 So let me go with that click submit this method. 33 00:02:27,960 --> 00:02:33,600 None of this is moanin because we d aren't required for I put something in here, this just needs to 34 00:02:33,600 --> 00:02:36,150 have some character elect me. 35 00:02:36,150 --> 00:02:40,860 So obviously you can use JavaScript to get that data you pay to get it. 36 00:02:40,860 --> 00:02:42,690 You can validate in clients. 37 00:02:42,690 --> 00:02:45,510 I'm always validating server side as well. 38 00:02:45,810 --> 00:02:48,870 So that's just the bread, the default validation. 39 00:02:48,870 --> 00:02:56,550 You can also do some extra validation which allows, I mean not extra validation, say alternative validation 40 00:02:56,550 --> 00:02:59,210 and show you a different style. 41 00:02:59,430 --> 00:03:08,460 So what we are going to do is show you what I'm going to show you how to put customer feedback. 42 00:03:08,460 --> 00:03:14,790 So for put a div, we're going to put class invalid feedback. 43 00:03:15,780 --> 00:03:17,640 We can provide feedback as well. 44 00:03:17,640 --> 00:03:24,090 So feel free to check that out on the bootstrap website for more information. 45 00:03:24,270 --> 00:03:28,920 And in here on the site, incorrect email address. 46 00:03:29,220 --> 00:03:31,710 And I'll also do it for. 47 00:03:33,960 --> 00:03:38,410 This one incorrect username. 48 00:03:40,290 --> 00:03:48,670 OK, so currently, if I want to try and submit it still to the bread, the default to the couple of 49 00:03:48,690 --> 00:03:53,410 more things that we need to do, we need to add some data here. 50 00:03:54,300 --> 00:03:58,590 What we are going to do is add a class of needs. 51 00:03:58,590 --> 00:04:00,260 That's validation. 52 00:04:00,780 --> 00:04:03,270 They're going to say no validation, no. 53 00:04:03,270 --> 00:04:04,410 Let's see what it does. 54 00:04:04,730 --> 00:04:09,600 If I reload like this, you know, nothing is appearing there. 55 00:04:09,780 --> 00:04:15,420 So the reason for that is we need to actually sort of set this up in a JavaScript. 56 00:04:15,810 --> 00:04:19,680 So we need to initiate all of this stuff for the script tag. 57 00:04:20,160 --> 00:04:27,450 If you have a separate JavaScript file, feel free to actually use that one to put your code in to keep 58 00:04:27,450 --> 00:04:28,320 you nice and tidy. 59 00:04:28,590 --> 00:04:33,180 This is a very simple page, some putting it all on the same page. 60 00:04:33,390 --> 00:04:35,390 OK, so vol form. 61 00:04:35,400 --> 00:04:47,820 So you're going to get any form on the page using query selector rule based on the class. 62 00:04:48,900 --> 00:04:50,240 It is this class. 63 00:04:50,270 --> 00:04:54,780 You need a valley type of copy that. 64 00:04:55,900 --> 00:05:03,040 And you need to put a dot to indicate what you are checking is a for a class, they're going to say 65 00:05:03,040 --> 00:05:09,160 Iran dot prototype, DOPs life dot com. 66 00:05:09,880 --> 00:05:16,810 And on all the forms, I'm going to say for each one, we're going to essentially call this method on 67 00:05:16,810 --> 00:05:17,380 each of them. 68 00:05:17,590 --> 00:05:19,220 There's going to be the form in here. 69 00:05:19,250 --> 00:05:22,020 So this is the individual thing from the array, 70 00:05:25,090 --> 00:05:27,740 which is the way I like to format either way. 71 00:05:29,020 --> 00:05:30,950 And in here, the three four. 72 00:05:31,750 --> 00:05:34,830 So this is each individual form in our case is only one. 73 00:05:34,840 --> 00:05:37,960 But this just in case of multiple, which is more than possible. 74 00:05:38,560 --> 00:05:45,160 Add event listener and the event listener is going to be simit. 75 00:05:45,160 --> 00:05:50,520 So when it has been submitted, I'm going to call this function now with event. 76 00:05:50,560 --> 00:05:53,100 So this is the default event that is happening. 77 00:05:57,580 --> 00:06:10,210 And in here, this event to prevent default, which is submitting it event dot stop propagation just 78 00:06:10,210 --> 00:06:15,520 to stop the touch event, the submission event going down in cases of below it. 79 00:06:15,910 --> 00:06:19,060 And we're also not in here. 80 00:06:19,070 --> 00:06:19,740 Sorry, 81 00:06:24,190 --> 00:06:27,730 this is this is meant to be an exchange on my back. 82 00:06:27,820 --> 00:06:38,710 So if the form is invalid, check needed to the need to spell correctly is not valid. 83 00:06:38,710 --> 00:06:43,480 Only then would we want to prevent the default and stop the propagation. 84 00:06:43,480 --> 00:06:49,180 Otherwise we would continue with submitting to whatever action have been implemented. 85 00:06:49,660 --> 00:06:53,380 Next we're going to say form the class list. 86 00:06:53,830 --> 00:06:59,320 That ad was done valid to 87 00:07:01,810 --> 00:07:14,350 semicolon and in here the form we're going to false line and that should be all good to go below. 88 00:07:14,350 --> 00:07:20,170 Click that then we go anything else because it doesn't require data. 89 00:07:20,290 --> 00:07:22,000 They automatically have succeeded. 90 00:07:22,150 --> 00:07:24,740 But now we get this error incorrect email address. 91 00:07:24,740 --> 00:07:25,920 We can't see formatting. 92 00:07:25,930 --> 00:07:29,380 However, we want to put something in here still. 93 00:07:29,410 --> 00:07:35,440 You know, it's not valid if I do that now, it is valid and I'm going to put something in here. 94 00:07:35,440 --> 00:07:37,210 We're all good and we can submit it. 95 00:07:37,510 --> 00:07:39,130 That is it for validation. 96 00:07:39,290 --> 00:07:42,760 OK, I said do a lot more information on the bouchra website. 97 00:07:43,150 --> 00:07:45,760 Feel free to go over this and have a look. 98 00:07:45,970 --> 00:07:51,550 If you have any questions, feel free to publish your message on discord on my website or social media 99 00:07:51,880 --> 00:07:55,060 or links and everything, even the description and on the channel. 100 00:07:55,360 --> 00:07:58,510 And I look forward to seeing you in the next awesome video.