The Document Object
So far we've been playing with the Window object... This has allowed us to do things like open new windows, close old windows, bring up 'alert' boxes (window.open(), window.close(), window.alert() respectively).
Finding out what's on our document
Open up a form that you've created and do the following:
- Choose a simple Text field on your form, and give it an id="firstname"
- Add an 'onsubmit' event to your form tag, and write the code as follows: onsubmit="window.alert('The value is ' + document.getElementById('firstname').value);"
- Now test out your form by typing in your field then clicking submit!
What's happening when I click submit?
- The browser checks whether there's an onsubmit event on the form
- Search through the entire document for an element with an ID of 'firstname'
- Get the text typed into the 'firstname' element (the value of the text field)
- Display the value in an alert box
This kind of code is extremely common, especially the document.getElementById() bit. Let's find out how it works.
A short description of document.getElementById()
When we write code like
the browser gives us back a 'reference' to the tag (referred to as an element in JS). We can access (and change) almost every aspect of the element including its attributes, styling, position in the document, or even its ID. For example,
document.getElementById("firstname").type = 'checkbox';
would find 'firstname', then change its type to 'checkbox' (instantly turning your text field into a checkbox!).
These properties (such as 'type', 'value', 'style', 'tagName' and 'className') all belong to the element, and are part of the Document Object Model that describes how the browser sees and works with your page.
To do this, add the following code somewhere inside your <head>...</head> tags:
Now we can modify our form's onsubmit to just call our new function, checkForm().
<form action="mailto:email@example.com" onsubmit="checkForm()" > ... all your other form elements go here ... </form>
Give it a try... it should behave exactly like it did before, but now we'll be ready to add more statements to our program!
Now that we've tested our function to see that it works, we now want to change it so that it will actually test the value of our field to see if it's empty, and if it is, then let the user know! To do this, we'll need to use an if-else statement.
Have a go at building on this to check the rest of your form's input boxes (Note: only the input boxes for the moment, don't worry about radio buttons or check boxes or the like). You might also want to learn more about the if-else statement at w3schools.
More on Functions
Try the following:
- modify the demo so that multiplies 4 and 5 instead of 4 and 3.
- modify the product function so that it adds the two numbers instead of multiplying them.
Stopping your form from being submitted
When you test your form, you'll notice that even though your input validation picks up the fact that there's stuff missing, it still goes ahead and tries to submit the form! We need to stop our form from being submitted if the input validation fails (ie, if the user has left some required field blank!)
<form action="mailto:firstname.lastname@example.org" onsubmit="return checkForm();"> ... all your other form elements are here ... </form>
in your checkForm() function. In plain English, if you can figure out at which points your if-else statement should say "OK! The input validation failed, don't let the form be submitted!", then that's where your return false should go. Give it a try!
You might also need to have a situation where your checkForm() function has this bit of code:
Step through your checkForm() code mentally, and see if you can find the point where you can say: "OK! Everything was entered correctly on the form, let it be submitted!" If you can find this spot, that's where you want to return the value 'true'.
Putting the Focus back in the field
Wouldn't it be nice to put the cursor back into the right spot for our user after we have just asked them to enter their name? For example, the user didn't fill in their fullname, so when they tried to submit the form, our input validation pops up saying "Please enter your fullname". We already know how to get our hands on an object for the fullname input element using the document object's getElementById() method (see above code), but we don't have any idea how we can get this to put the cursor back in this input field (this is called: receiving the focus).
When you find the right reference (the one that corresponds to our text input box), scroll down to take a look at the methods for this object, and you will find that it has a built-in focus() method! Click on the focus() method and look at the example you find there.
Can you figure out whereabouts you will need to put this code (with a small modification) in your own checkForm() function? Have a go... and if you get stuck, ask for help! (Hint: we want to put the focus on our fullname field right after we alert the user to the fact that they haven't entered their full name!)
Copy-n-paste-n-edit this so that it works for the rest of your input validation fields too.
More advanced Input Validation techniques