Question
You have created a basic form and added interactivity to images using JavaScript. Now it is time to validate information entered into your form fields.
You have created a basic form and added interactivity to images using JavaScript. Now it is time to validate information entered into your form fields. You will use the "registration.html" file found in your Zip file. You will see that the page has a form with the following fields to allow users to register for an account. The items in parentheses are defined formatting instructions to be observed for each field.
Username* (must only contain letters and numbers)
Password* (minimum of 8 characters)
PasswordVerify* (minimum of 8 characters, must match password)
FirstName* (text string)
LastName* (text string)
Email (uses xxx@xxx.xxx format)
PhoneNumber (uses (xxx) xxx-xxxx format)
SignUpNewsletter (radio box for yes/no)
Tips:
JavaScript is case sensitive, so a variable named myVar is different from MyVar and myvar.
Perform your form validation testing as you go rather than all at the end. It will be much easier to fix the error if you have a smaller sequence of code to review.
Directions
Read the assignment overview.
Use the registration.html file to add functionality to the form found on the page. The JavaScript that you write should validate each field and, if errors are made, display appropriate error messages that direct the user to complete the form properly. Once the form is completed, your script should open the confirmation page (confirmation.php).
Note: The input fields in the form with an asterisk are required fields.
Make sure to do the following:
Write JavaScript that defines that a field is required and generates an appropriate error message if the field has not been completed.
Write JavaScript to validate all input fields per the formatting definitions that the field values should be checked against (found in the overview) after each field.
Write JavaScript that displays an appropriate error correction message (next to the field) in the event a form entry error has been made.
Write a JavaScript that will default the user’s cursor to the first erroneous input field in the event that there is an input error.
Create a submit button that executes the validation when submitted.
REGISTRATION.HTML FILE
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="volunteer.html">Volunteers</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="#">
<label for="userName">Username:</label>
<input type="text" name="userName" placeholder="Enter your Username" />
<label for="Password">Password:
</label>
<input type="password" name="password" placeholder="Enter your Password" />
<label for="passwordVerify">Verify your Password:
</label>
<input type="password" name="passwordVerify" placeholder="Enter in your Password again" />
<label for="firstName">First Name:
</label>
<input type="text" name="firstName" placeholder="Enter your First Name" />
<label for="hostName">Last Name:
</label>
<input type="text" name="lastName" placeholder="Enter your Last Name" />
<label for="email">Email:
</label>
<input type="text" name="email" placeholder="Enter your Email Address" />
<label for="phoneNumber">Phone Number
</label>
<input type="text" name="lastName" placeholder="Enter your Phone Number" />
<label for="signUpNewsletter">Sign up for newsletter:
</label>
<input type="radio" name="signUpNewsletter" value="Yes" checked> Yes
<input type="radio" name="signUpNewsletter" value="No"> No
<input type="submit" value="Next step">
</form>
</section>
<footer>This events site is for IT3515 tasks.
</footer>
</body>
</html>
MAIN.CSS FILE IF NEEDED
body {
font: 15px arial, sans-serif;
color: #808080;
}
input[type=text],
select ,input[type=password],radio{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] ,input[type=button]{
width: 100%;
background-color: #800D1E;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover ;input[type=button]:hover {
background-color: #802F1E;
}
section {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
article {
border-radius: 5px;
background-color: #CCCCCC;
padding: 20px;
color: #222222;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #CCCCCC;
color: #333
}
ul.topnav li.right {
float: right;
}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
.top {
position: relative;
background-color: #ffffff;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
z-index: 2;
}
.logo {
font-family: arial;
text-decoration: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 37px;
letter-spacing: 3px;
color: #555555;
display: block;
position: absolute;
top: 17px;
}
.logo .dotcom {
color: #800D1E
}
.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
}
.top .logo {
position: relative;
top: 0;
width: 100%;
text-align: left;
margin: auto
}
footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
Step by Step Solution
3.44 Rating (154 Votes )
There are 3 Steps involved in it
Step: 1
userVar documentgetElementBylduserName passVar documentgetElementByldPassword passVerifyVar document...
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started
Stats Data And Models
Authors: Richard D. De Veaux, Paul D. Velleman, David E. Bock
4th Edition
321986490, 978-0321989970, 032198997X, 978-0321986498
