In this exercise, you’ll change the way the Register application submits the for
ID: 3915238 • Letter: I
Question
In this exercise, you’ll 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, you’ll use a submit button and cancel its default action if the validation fails.
1. Open the HTML and JavaScript files in this folder: exercises_shortch07 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 you’re 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 you’re using the Chrome browser so you don’t have to provide for cross-browser compatibility
code:
index.html
register.css
register.js
register_account.html
Explanation / Answer
If you have any doubts, please give me comment...
index.html
<!DOCTYPE html>
<html>
<head>
<title>Account Registration</title>
<link rel="stylesheet" href="register.css">
<script src="register.js"></script>
</head>
<body>
<main>
<h1>Register for an Account</h1>
<form action="register_account.html" method="get" name="registration_form" id="registration_form">
<label for="email_address">E-Mail:</label>
<input type="text" name="email_address" id="email_address">
<span>*</span><br>
<label for="phone">Mobile Phone:</label>
<input type="text" name="phone" id="phone">
<span>*</span><br>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="">Select an option</option>
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
<span>*</span><br>
<label>Contact me by:</label>
<input type="radio" name="contact" id="text" value="text" checked>Text
<input type="radio" name="contact" id="email" value="email">Email
<input type="radio" name="contact" id="none" value="none">Don't contact me
<br>
<label>Terms of Service:</label>
<input type="checkbox" name="terms" id="terms" value="yes">I accept
<span>*</span><br>
<input type="submit" id="register" value="Register">
<input type="button" id="reset_form" value="Reset">
</form>
</main>
</html>
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();
return true;
}
return false;
};
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() {
$("reset_form").onclick = resetForm;
$("email_address").focus();
};
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.