1 00:00:00,390 --> 00:00:05,730 This lesson we're going to be looking at getting all of the input values, we already have a variable 2 00:00:05,730 --> 00:00:11,310 called inputs, which selects all of the inputs that we have on our page so we can loop through that. 3 00:00:11,310 --> 00:00:17,490 So whenever the validation is to take place, we can get that inputs, object and loop through all of 4 00:00:17,520 --> 00:00:18,900 the values that are available. 5 00:00:19,110 --> 00:00:26,340 Using for each allows us to iterate through each one of the available inputs and we can create a function 6 00:00:26,430 --> 00:00:27,890 and we'll call that E-L. 7 00:00:27,900 --> 00:00:34,670 And what this will do is this will output each one of the active inputs that are available on the page. 8 00:00:34,700 --> 00:00:39,290 So when I do the submit, you can see that we're getting all of the input values. 9 00:00:39,290 --> 00:00:46,120 So each one of them has a name and this is how we associate the values so we can also pick up that name 10 00:00:46,170 --> 00:00:47,920 information from the inputs. 11 00:00:48,210 --> 00:00:54,540 So let's set up a temporary name variable using the element that we've just selected. 12 00:00:54,540 --> 00:01:00,630 And as we iterate through them, we can use get attribute to get some attribute information that's contained 13 00:01:00,630 --> 00:01:01,540 within the element. 14 00:01:01,740 --> 00:01:06,870 So if you want to get the name, we could get the temporary name that's available or the name that's 15 00:01:06,870 --> 00:01:08,040 associated with it. 16 00:01:08,220 --> 00:01:13,620 And this is just going to be picking up the as it loops through all the inputs, it's going to be checking 17 00:01:13,620 --> 00:01:17,190 to see if it has a name and what that name is. 18 00:01:17,370 --> 00:01:20,640 So you see that we've got email, password, username and nul. 19 00:01:20,790 --> 00:01:23,950 So Nola's coming up as that submit value. 20 00:01:24,330 --> 00:01:30,150 So next we need to check to make sure that the name exists because these are the inputs that we're checking. 21 00:01:30,150 --> 00:01:34,680 So we're not checking the submit button or the values from the submit button unless you want to track 22 00:01:34,680 --> 00:01:36,240 that into your object. 23 00:01:36,750 --> 00:01:38,580 But for now, we're not going to be checking those. 24 00:01:38,610 --> 00:01:44,620 We can add in a condition checking to see temp name and making sure that it's not equal to null. 25 00:01:44,670 --> 00:01:49,110 And if it's not equal to null, then we can run our validation checks. 26 00:01:49,140 --> 00:01:53,550 Want to reset the border color as this is something we're going to be updating or looping through the 27 00:01:53,550 --> 00:01:58,650 elements, taking that element, because we are going to be updating that style of the border color. 28 00:01:58,650 --> 00:02:06,380 So updating our border color value and we're going to set the border color back to its default value. 29 00:02:06,570 --> 00:02:09,630 So it's the one that's contained within it, within the style already. 30 00:02:09,930 --> 00:02:15,300 So inputs already have a DDD and we're going to reset it back to DTD because if there's any errors or 31 00:02:15,300 --> 00:02:17,530 any issues, we're going to be setting it to red. 32 00:02:17,790 --> 00:02:21,240 So this is where we can use and we can reset those values. 33 00:02:21,540 --> 00:02:25,550 Another thing that we want to do is we also want to build our object array. 34 00:02:25,800 --> 00:02:27,030 So let's set up a variable. 35 00:02:27,030 --> 00:02:30,420 We can call that data and this is going to be an empty object. 36 00:02:30,570 --> 00:02:35,080 And as we iterate through these, this is where we can add in the data. 37 00:02:35,100 --> 00:02:44,250 So taking our data object and as we loop through, we can use temp name as the name of the as the name 38 00:02:44,250 --> 00:02:47,830 of the object and then value getting that element value. 39 00:02:48,060 --> 00:02:54,480 So when we finish our loop, you can see that when we cancel out the value of data, we're going to 40 00:02:54,480 --> 00:02:58,350 have all that content set up and in that element. 41 00:02:58,360 --> 00:03:01,590 So we've got the email, we've got the password and username. 42 00:03:01,620 --> 00:03:07,830 So if we put in some information, you can see that when I do sign up, all of that information is passed 43 00:03:07,830 --> 00:03:08,550 into the object. 44 00:03:08,560 --> 00:03:10,390 So it built a nice, neat object. 45 00:03:10,680 --> 00:03:17,670 So what we're doing here is we're using temp name, which is getting information from the attribute, 46 00:03:18,060 --> 00:03:21,360 the name attribute of each one of the input elements. 47 00:03:21,510 --> 00:03:27,930 And then we're also getting a value because as we're looping through all the elements that have an input 48 00:03:27,930 --> 00:03:31,680 tag, then we can retrieve back values that are associated with them. 49 00:03:31,890 --> 00:03:35,640 And while we're doing all of that, this is where we can build our object. 50 00:03:35,670 --> 00:03:43,200 So coming up next is where we can check to see the fields and the field values so we can check to see 51 00:03:43,380 --> 00:03:50,050 what the length of an element is and if it's included, if it's one of these ones that are required. 52 00:03:50,280 --> 00:03:56,130 So if the length is going to be zero and if it is required, then we're going to have an error. 53 00:03:56,130 --> 00:03:58,620 And that's going to be the first error that we're going to set up coming up. 54 00:03:58,650 --> 00:04:03,360 So go ahead and set up the ability to loop through all the elements, grab the element information and 55 00:04:03,360 --> 00:04:05,820 build an object with the element contents.