1 00:00:02,020 --> 00:00:04,130 Let's start with the form submission 2 00:00:04,130 --> 00:00:06,480 and validation before we then thereafter 3 00:00:06,480 --> 00:00:09,233 conclude this challenge by adding styling. 4 00:00:10,290 --> 00:00:13,470 Now for this, you'll learn that to configure 5 00:00:13,470 --> 00:00:15,220 how the form is submitted, 6 00:00:15,220 --> 00:00:19,990 you go to this form element and there you got the action 7 00:00:19,990 --> 00:00:22,140 and the method attribute which you can set. 8 00:00:23,210 --> 00:00:25,920 Now, the action attribute is set 9 00:00:25,920 --> 00:00:29,860 to the URL to which the form should be submitted 10 00:00:29,860 --> 00:00:34,050 or to the path after the URL by which that form 11 00:00:34,050 --> 00:00:37,230 is being served to which the form should be submitted. 12 00:00:37,230 --> 00:00:40,123 And the methods then is set to GET or POST. 13 00:00:41,230 --> 00:00:45,050 Now you did learn that POST is actually the value you want, 14 00:00:45,050 --> 00:00:47,800 but it doesn't work without a server site 15 00:00:47,800 --> 00:00:51,210 that is prepared to handle POST requests. 16 00:00:51,210 --> 00:00:54,390 And since we don't have such a server side yet 17 00:00:54,390 --> 00:00:56,960 since we have no code on the server side 18 00:00:56,960 --> 00:00:58,556 that would handle POST requests, 19 00:00:58,556 --> 00:01:01,160 we don't stick to GET for now. 20 00:01:01,160 --> 00:01:02,110 And for the action, 21 00:01:02,110 --> 00:01:05,519 I'll just enter slash challenge here so that the form 22 00:01:05,519 --> 00:01:09,390 is submitted to this current sub folder. 23 00:01:09,390 --> 00:01:12,130 So to that path which is responsible 24 00:01:12,130 --> 00:01:15,460 for serving this HTML file. 25 00:01:15,460 --> 00:01:17,730 If you did use other values here, 26 00:01:17,730 --> 00:01:21,160 that doesn't matter too much, since form submission 27 00:01:21,160 --> 00:01:23,690 isn't really the focus of this task 28 00:01:23,690 --> 00:01:28,180 anyways since that service side part is missing. 29 00:01:28,180 --> 00:01:30,890 Now regarding the validation, it's up to you 30 00:01:30,890 --> 00:01:33,000 which kind of rules you wanna add 31 00:01:33,000 --> 00:01:35,480 but I think it's fair to say that we definitely 32 00:01:35,480 --> 00:01:38,580 wanna require all those fields. 33 00:01:38,580 --> 00:01:42,720 None of those fields should be empty and therefore we need 34 00:01:42,720 --> 00:01:46,882 to add the required attribute to all those inputs. 35 00:01:46,882 --> 00:01:50,510 This is a Boolean attribute as you learned. 36 00:01:50,510 --> 00:01:53,650 So the existence of it alone is enough. 37 00:01:53,650 --> 00:01:56,400 And if it does exist on an element, 38 00:01:56,400 --> 00:01:58,590 this element is required. 39 00:01:58,590 --> 00:02:01,500 So a user needs to enter a value here. 40 00:02:01,500 --> 00:02:05,603 Submitting this input in an empty state is not allowed. 41 00:02:06,620 --> 00:02:09,759 And therefore "required" is definitely an attribute 42 00:02:09,759 --> 00:02:13,360 I'll add to all those inputs and also 43 00:02:13,360 --> 00:02:16,730 to the text area also to the drop down. 44 00:02:16,730 --> 00:02:19,840 Though there one value is selected out 45 00:02:19,840 --> 00:02:22,820 of the box from the start automatically. 46 00:02:22,820 --> 00:02:25,730 Nonetheless, we can still add it to the select element 47 00:02:25,730 --> 00:02:30,700 as well and also add it to all those radio buttons here. 48 00:02:30,700 --> 00:02:32,910 And then you'll learn that only one of them has 49 00:02:32,910 --> 00:02:36,850 to be selected to fulfill this criteria. 50 00:02:36,850 --> 00:02:40,070 And I'll also add it to this checkbox field. 51 00:02:40,070 --> 00:02:43,080 We can only submit this form if the user 52 00:02:43,080 --> 00:02:48,080 did accept the terms but you can of course add more rules. 53 00:02:50,160 --> 00:02:51,950 You can, for example, 54 00:02:51,950 --> 00:02:56,310 require a min length on the phone number field. 55 00:02:56,310 --> 00:03:00,250 So not a min value, not a min number, 56 00:03:00,250 --> 00:03:04,885 but a min length of five because you are convinced 57 00:03:04,885 --> 00:03:08,890 that there are no phone numbers shorter than five, 58 00:03:08,890 --> 00:03:11,240 and hence any value shorter 59 00:03:11,240 --> 00:03:14,293 than five characters long would be invalid. 60 00:03:15,280 --> 00:03:19,400 The message may be also should have a min length of 10 61 00:03:19,400 --> 00:03:23,220 but then also especially a max length of 200. 62 00:03:23,220 --> 00:03:27,083 So that users can't enter super long messages. 63 00:03:29,520 --> 00:03:32,800 And that's it for me but you can of course, 64 00:03:32,800 --> 00:03:35,670 add more rules if you want to. 65 00:03:35,670 --> 00:03:37,750 Now I'll auto format that code to make 66 00:03:37,750 --> 00:03:41,883 it a bit more readable and then I'll move on to the styling.