>> SPEAKER: Let's now take a look at a web page that allows a user to
register for something but that actually includes some client-side
validation of his or her inputs.
>> Notice here, in form-1.HTML, I have that same form as before but I've
added an ID attribute to my form tag, the value of which is register, so
that I have an ID via which I can uniquely identify that form in my DOM.
Now notice below my form tag is a script tag, so that very deliberately,
my JavaScript code will only execute once the form tag and its DOM nodes
have been loaded.
>> Inside of the script tag notice is the first line here where I declare a
variable called form and assign it the return value of
document.getElementByID of quote unquote registration.
It's this line of code that will look through my DOM, looking for the
element or node that has a unique identifier of registration, storing
the return value ultimately in this variable.
>> Then I register with that form an event handler for the form submission,
with form.onsubmit and assign that an anonymous function, the body of which
proceeds to do the following.
If that form's field, whose name is email, has a value from the user equal
to quote unquote nothing, then we're going to alert the user that he or she
must provide their email address, and we return false so that the form
itself is not submitted to register dot php.
>> Else, if the form has a field whose name is password and whose value is
quote unquote, then let's yell at the user that he or she
must provide a password.
And again, return false so that the form is not submitted to
register dot php.
>> Meanwhile, if the value the user has typed in to the form field called
password does not match the value that the user has provided for the form
field called confirmation, then let's yell at the user the passwords do not
match, and then return false so that the form is not submitted to
register dot php.
>> Lastly, if it is not the case that the form's agreement input is checked,
then let's yell at the user explaining that he or she must agree to the terms
and condition, and again return false so that the form is not submitted to
register dot php.
>> Else if, none of those mistakes have been made, let's indeed return true
and allow the form to be submitted to register dot php.
>> Let's take a look at these possible errors now by opening
the page in a browser.
http://localhost/form-1.HTML.
Here's then that form.
Let's provide nothing.
>> You must provide your email address.
All right, let's at least cooperate along those lines.
>> You must provide a password.
All right, let's choose a password like crimson.
Passwords do not match.
Ah, I need to cooperate and provide the same word, crimson, again.
>> You must agree to the terms and conditions.
All right, let's now check that box.
And finally, whew, I'm registered.