In this exercise, youll change the way the Register application submits the form. Instead of using a regular button and calling the submit() method in code if the validation passes, youll use a submit button and cancel its default action if the validation fails.

1. Open the HTML and JavaScript files in this folder: exercises_short\ch07 egister\

2. In the index.html file, find the Register input element and change its type attribute from button to submit. This means the form will be submitted when the button is clicked. Then, run the application and click the Register button to see that youre taken to the confirmation page even though the data is invalid.

3. In the main JavaScript file (register.js), change the processEntries() function so it accepts the event object as a parameter. Then, change the function so it prevents the default action of the submit button if the validation fails. For this, you can assume youre using the Chrome browser so you dont have to provide for cross-browser compatibility

code:

index.html

        
 
Register for an Account
 
 E-Mail:  * Mobile Phone:  * Country:  Select an option USA Canada Mexico  * Contact me by: Text Email Don't contact me Terms of Service: I accept *   
 
 

register.css

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: white; width: 730px; margin: 0 auto; border: 3px solid blue; padding: 0 2em 1em; } h1 { font-size: 150%; color: blue; margin-bottom: .5em; } h2 { font-size: 120%; margin-bottom: .25em; } label { float: left; width: 9em; } input, select { width: 20em; margin-left: 1em; margin-bottom: 1em; } input[type="checkbox"],[type="radio"] { width: 1em; } #registration_form span { color: red; } 

register.js

"use strict"; var $ = function(id) { return document.getElementById(id); }; var processEntries = function() { var isValid = true; // get values for user entries var email = $("email_address").value; var phone = $("phone").value; var country = $("country").value; var contact = "Text"; if ($("email").checked) { contact = "Email"; } if ($("none").checked) { contact = "None"; } var terms = $("terms").checked; // check user entries for validity if (email == "") { $("email_address").nextElementSibling.firstChild.nodeValue = "This field is required."; isValid = false; } else { $("email_address").nextElementSibling.firstChild.nodeValue = ""; } if (phone == "") { $("phone").nextElementSibling.firstChild.nodeValue = "This field is required."; isValid = false; } else { $("phone").nextElementSibling.firstChild.nodeValue = ""; } if (country == "") { $("country").nextElementSibling.firstChild.nodeValue = "Please select a country."; isValid = false; } else { $("country").nextElementSibling.firstChild.nodeValue = ""; } if (terms == false) { $("terms").nextElementSibling.firstChild.nodeValue = "This box must be checked."; isValid = false; } else { $("terms").nextElementSibling.firstChild.nodeValue = ""; } if (isValid == true) { $("registration_form").submit(); } }; var resetForm = function() { $("registration_form").reset(); $("email_address").nextElementSibling.firstChild.nodeValue = "*"; $("phone").nextElementSibling.firstChild.nodeValue = "*"; $("country").nextElementSibling.firstChild.nodeValue = "*"; $("terms").nextElementSibling.firstChild.nodeValue = "*"; $("email_address").focus(); }; window.onload = function() { $("register").onclick = processEntries; $("reset_form").onclick = resetForm; $("email_address").focus(); };

register_account.html

        
 
Register for an Account
 
Congratulations! Your account registration has been submitted.
 
You'll receive an email shortly with more information. Welcome!
 
  

Register for an Account E-Mail: Mobile Phone: Country: Contact me by:Text Email Don't contact me Terms of Service: I accept This box must be checked. This field is required. This field is required. Please select a country Select an option Regster Reset