1
00:00:00,000 --> 00:00:00,430

2
00:00:00,430 --> 00:00:03,020
>> SPEAKER: Let's now take a look at
a web page that allows a user to

3
00:00:03,020 --> 00:00:06,230
register for something but that actually
includes some client-side

4
00:00:06,230 --> 00:00:08,690
validation of his or her inputs.

5
00:00:08,690 --> 00:00:13,210
>> Notice here, in form-1.HTML, I have
that same form as before but I've

6
00:00:13,210 --> 00:00:17,940
added an ID attribute to my form tag,
the value of which is register, so

7
00:00:17,940 --> 00:00:22,140
that I have an ID via which I can
uniquely identify that form in my DOM.

8
00:00:22,140 --> 00:00:26,090
Now notice below my form tag is a script
tag, so that very deliberately,

9
00:00:26,090 --> 00:00:30,840
my JavaScript code will only execute
once the form tag and its DOM nodes

10
00:00:30,840 --> 00:00:31,990
have been loaded.

11
00:00:31,990 --> 00:00:35,650
>> Inside of the script tag notice is the
first line here where I declare a

12
00:00:35,650 --> 00:00:38,750
variable called form and assign
it the return value of

13
00:00:38,750 --> 00:00:42,850
document.getElementByID of quote
unquote registration.

14
00:00:42,850 --> 00:00:45,860
It's this line of code that will look
through my DOM, looking for the

15
00:00:45,860 --> 00:00:50,130
element or node that has a unique
identifier of registration, storing

16
00:00:50,130 --> 00:00:52,590
the return value ultimately
in this variable.

17
00:00:52,590 --> 00:00:56,910
>> Then I register with that form an event
handler for the form submission,

18
00:00:56,910 --> 00:01:02,190
with form.onsubmit and assign that an
anonymous function, the body of which

19
00:01:02,190 --> 00:01:04,220
proceeds to do the following.

20
00:01:04,220 --> 00:01:09,700
If that form's field, whose name is
email, has a value from the user equal

21
00:01:09,700 --> 00:01:14,220
to quote unquote nothing, then we're
going to alert the user that he or she

22
00:01:14,220 --> 00:01:18,120
must provide their email address, and
we return false so that the form

23
00:01:18,120 --> 00:01:21,680
itself is not submitted
to register dot php.

24
00:01:21,680 --> 00:01:26,070
>> Else, if the form has a field whose name
is password and whose value is

25
00:01:26,070 --> 00:01:28,800
quote unquote, then let's yell
at the user that he or she

26
00:01:28,800 --> 00:01:30,190
must provide a password.

27
00:01:30,190 --> 00:01:33,620
And again, return false so that
the form is not submitted to

28
00:01:33,620 --> 00:01:35,160
register dot php.

29
00:01:35,160 --> 00:01:38,920
>> Meanwhile, if the value the user has
typed in to the form field called

30
00:01:38,920 --> 00:01:43,100
password does not match the value that
the user has provided for the form

31
00:01:43,100 --> 00:01:47,210
field called confirmation, then let's
yell at the user the passwords do not

32
00:01:47,210 --> 00:01:50,800
match, and then return false so that
the form is not submitted to

33
00:01:50,800 --> 00:01:52,810
register dot php.

34
00:01:52,810 --> 00:01:59,030
>> Lastly, if it is not the case that the
form's agreement input is checked,

35
00:01:59,030 --> 00:02:02,740
then let's yell at the user explaining
that he or she must agree to the terms

36
00:02:02,740 --> 00:02:06,660
and condition, and again return false
so that the form is not submitted to

37
00:02:06,660 --> 00:02:08,460
register dot php.

38
00:02:08,460 --> 00:02:11,830
>> Else if, none of those mistakes have
been made, let's indeed return true

39
00:02:11,830 --> 00:02:14,990
and allow the form to be submitted
to register dot php.

40
00:02:14,990 --> 00:02:17,680
>> Let's take a look at these possible
errors now by opening

41
00:02:17,680 --> 00:02:19,150
the page in a browser.

42
00:02:19,150 --> 00:02:25,780
http://localhost/form-1.HTML.

43
00:02:25,780 --> 00:02:26,890
Here's then that form.

44
00:02:26,890 --> 00:02:28,720
Let's provide nothing.

45
00:02:28,720 --> 00:02:30,660
>> You must provide your email address.

46
00:02:30,660 --> 00:02:34,930
All right, let's at least cooperate
along those lines.

47
00:02:34,930 --> 00:02:36,380
>> You must provide a password.

48
00:02:36,380 --> 00:02:40,150
All right, let's choose a
password like crimson.

49
00:02:40,150 --> 00:02:41,245
Passwords do not match.

50
00:02:41,245 --> 00:02:46,250
Ah, I need to cooperate and provide
the same word, crimson, again.

51
00:02:46,250 --> 00:02:48,290
>> You must agree to the terms
and conditions.

52
00:02:48,290 --> 00:02:50,290
All right, let's now check that box.

53
00:02:50,290 --> 00:02:52,910
And finally, whew, I'm registered.

54
00:02:52,910 --> 00:02:54,678