Here is my code, I am having difficulties validating. Please tell me what I am doing wrong. I have everything listed that is required for my assignment, but I cannot understand where I am messing up. When I complete the registration and go to the next step it is here where I have problems. After making my selections on the Interests page, I am supposed to be able to hit register and get a notification thanking me for registering, but nothing happens... no next page or error is given. I didn't know what information to provide, so I have given all of my HTML, javascript, and php files. Thank you for any help and guidance you can provide as I am a student and very new to Javascript.
Registration.html and Registration.js:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript">
function formValidation() {
// Make quick references to our fields.
var username = document.getElementById('userName');
var password = document.getElementById('password');
var passwordv = document.getElementById('passwordVerify');
var firstname = document.getElementById('firstName');
var lastname = document.getElementById('lastName');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var signup = document.getElementById('signUpNewsletter');
// To check empty form fields.
if (username.value.length == 0) {
document.getElementById('head').innerText = "* All fields are required
*"; // This segment displays the validation rule for all fields
username.focus();
return false;
}
// Check each input in the order that it appears in the form.
if (textAlphanumeric(username, "* For your username please use alphabets
and numbers only *")) {
if (lengthDefine(password, 8, 16 )) {
if (matchPass(password,passwordv,"* Passwords do not match! *" )) {
if (inputAlphabet(firstname, "* For your name please use alphabets only
*")) {
if (inputAlphabet2(lastname, "* For your name please use alphabets only
*")) {
if (emailValidation(email, "* Please enter a valid email address *")) {
if (textAlphanumeric(phone, "* Enter phone number in format (xxx)xxx-xxxx
*")) {
}
}
}
}
}
}
return false;
}
// Function that checks whether input text is numeric or not.
function textNumeric(inputtext, alertMsg) {
var numericExpression = /^[0-9]+$/;
if (inputtext.value.match(numericExpression)) {
return true;
} else {
document.getElementById('p6').innerText = alertMsg; // This segment
displays the validation rule for zip.
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or
not.
function inputAlphabet(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p3').innerText = alertMsg; // This segment
displays the validation rule for name.
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text is an alphabetic character or
not.
function inputAlphabet2(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p4').innerText = alertMsg; // This segment
displays the validation rule for name.
//alert(alertMsg);
inputtext.focus();
return false;
}
}
// Function that checks whether input text includes alphabetic and
numeric characters.
function textAlphanumeric(inputtext, alertMsg) {
var alphaExp = /^[0-9a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
} else {
document.getElementById('p5').innerText = alertMsg; // This segment
displays the validation rule for address.
inputtext.focus();
return false;
}
}
// Function that checks whether the input characters are restricted
according to defined by user.
function lengthDefine(inputtext, min, max) {
var uInput = inputtext.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
document.getElementById('p1').innerText = "* Please enter between " + min
+ " and " + max + " characters *"; // This segment displays the
validation rule for username
inputtext.focus();
return false;
}
}
// Function that checks whether the 2 passwords are correct.
function matchPass(pass1,pass2, alertMsg) {
if (pass1.value === pass2.value) {
return true;
} else {
document.getElementById('p2').innerText = alertMsg; // This segment
displays the validation rule for username
pass2.focus();
return false;
}
}
// Function that checks whether an user entered valid email address or
not and displays alert message on wrong email address format.
function emailValidation(inputtext, alertMsg) {
var emailExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (inputtext.value.match(emailExp)) {
return true;
} else {
document.getElementById('p5').innerText = alertMsg; // This segment
displays the validation rule for email.
inputtext.focus();
return false;
}
}
// Function that checks whether an user entered valid phone number or not
and displays alert message on wrong phone address format.
function phoneValidation(inputtext, alertMsg) {
var phoneExp = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}
[0-9]{4}$/;
if (inputtext.value.match(phoneExp)) {
document.getElementById("regform").submit();
return true;
} else {
document.getElementById('p6').innerText = alertMsg; // This segment
displays the validation rule for email.
inputtext.focus();
return false;
}
}
}
</script>
<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="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="interests.html" id="regform" name="regform" >
<p id="head"></p>
<label for="userName">Username:</label>
<input type="text" name="userName" id="userName" placeholder="Enter your
Username" />
<p id="p1"></p>
<label for="Password">Password:
</label>
<input type="password" name="password" id="password" placeholder="Enter
your Password" />
<p id="p2"></p>
<label for="passwordVerify">Verify your Password:
</label>
<input type="password" name="passwordVerify" id="passwordVerify"
placeholder="Enter in your Password again" />
<p id="p3"></p>
<label for="firstName">First Name:
</label>
<input type="text" name="firstName" id="firstName" placeholder="Enter
your First Name" />
<p id="p4"></p>
<label for="lastName">Last Name:
</label>
<input type="text" name="lastName" id="lastName" placeholder="Enter your
Last Name" />
<p id="p5"></p>
<label for="email">Email:
</label>
<input type="text" name="email" id="email" placeholder="Enter your Email
Address" />
<p id="p6"></p>
<label for="phoneNumber">Phone Number
</label>
<input type="text" name="phone" id="phone" placeholder="Enter your Phone
Number" />
<p id="p7"></p>
<label for="signUpNewsletter">Sign up for newsletter:
</label>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="Yes" checked> Yes
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="No"> No
<input type="submit" value="Next step">
</form>
</section>
<!--<footer>This events site is for IT-FP3215 tasks.
</footer>-->
</body>
</html>
Interest.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Interests Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript" src="js/interest.js"></script>
<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="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="confirm.html" id="addform">
<input type="hidden" name="userName" id="userName" />
<input type="hidden" name="password" id="password" />
<input type="hidden" name="passwordVerify" id="passwordVerify" />
<input type="hidden" name="firstName" id="firstName" />
<input type="hidden" name="lastName" id="lastName" />
<input type="hidden" name="email" id="email" />
<input type="hidden" name="phone" id="phone" />
<input type="hidden" name="signUpNewsletter" id="signup" />
<label for="checkbox">Interests:
</label><br/>
<input type="checkbox" class="check1" id="check1" name="interests"
value="Swimming"> Swimming<br>
<input type="checkbox" name="interests" id="check2" class="check2"
value="Travelling"> Travelling <br>
<input type="checkbox" name="interests" id="check3" class="check3"
value="Reading"> Reading <br>
<label for="signUpNewsletter">Sign up for newsletter:
</label><br/>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="Yes" checked> Yes <br>
<input type="radio" name="signUpNewsletter" id="signUpNewsletter"
value="No"> No<br>
<label for="comments">Comments:
</label><br/>
<textarea name="comments" id="comments" placeholder="Your Comments"
rows="10" cols="60"> </textarea><br>
<label for="referred">Referred by:
</label><br>
<input type="text" name="referred" id="referred" placeholder="Enter who
referred you" /><br>
<input type="button" value="Register" onclick="storeCookie()">
</form>
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
Confirm.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Interests Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script type="text/javascript" src="js/confirm.js"></script>
<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="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageFormContent">
Username: <p id="username">Placeholder</p>
Password: <p id="password">Placeholder</p>
First Name: <p id="firstName">Placeholder</p>
Last Name: <p id="lastName">Placeholder</p>
email: <p id="email">Placeholder</p>
Phone: <p id="phone">Placeholder</p>
Sign up News Letter: <p id="signup">Placeholder</p>
interest 1: <p id="username"></p>
Interest 2: <p id="username"></p>
Interest 3: <p id="username"></p>
Comments: <p id="phone">Placeholder</p>
<!--
Process content to display content on screen
-->
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
PHP:
<?php
echo "You form is successfully submitted. Thank you for registering.";
?>
Validation.js:
//a function which splits the url into the different variabls
window.onload= function(){
var params = {};
var param_array = window.location.href.split('?')[1].split('&');//split
the rul
for(var i in param_array){//save the parts in the arry
x = param_array[i].split('=');
params[x[0]] = x[1];
}
document.getElementById("userName").value = params.userName;//gets the
values of the username
document.getElementById("password").value = params.password;//gets
password value
document.getElementById("passwordVerify").value = params.passwordVerify;
document.getElementById("firstName").value = params.firstName;//first
name
document.getElementById("lastName").value = params.lastName;
document.getElementById("email").value = params.email;
document.getElementById("phone").value = params.phone;
document.getElementById("signup").value = params.signUpNewsletter;
}
function storeCookie(){
var username=document.getElementById("userName").value; //saves the
username in a variabe
document.cookie= "username=" + username; //saves the username variable in
a cookie
alert(document.cookie);
var password=document.getElementById("password").value; //saves the
password in a variable
document.cookie= "password=" + password; //saves the password varible in
a cookie
var fname=document.getElementById("firstName").value;//saves the first
name in a variable
document.cookie= "firstName=" + fname; //saves the firstname varible in a
cookie
var lname=document.getElementById("lastName").value ; //saves the last
name in a variable
document.cookie= "lastName=" + lname; //saves the lastnaem varible in a
cookie
var email=document.getElementById("email").value; //saves the email in a
variable
document.cookie= "email=" + email; //saves the email varible in a cookie
var phone=document.getElementById("phone").value ; //saves the phone in a
variable
document.cookie= "phone=" + phone;//saves the phone varible in a cookie
var signup=document.getElementById("signup").value; ////saves the sign up
value in a variable
document.cookie= "signUpNewsletter=" + signup;//saves the signup varible
in a cookie
var comments=document.getElementById("comments").value; //saves the
comments in a variable
document.cookie= "comments=" + comments; //saves the comments varible in
a cookie
var referred=document.getElementById("referred").value;//saves the
referred by value in a variable
document.cookie= "referred=" + referred; //saves the referred by varible
in a cookie
if(document.querySelector('.check1').checked){ //check if the checkbox is
checked if yes, it saves the value in cookie
var interest1=document.getElementById("check1").value;
document.cookie= "interest1=" + interest1;
}
if(document.querySelector('.check2').checked){ //check if the checkbox
is checked if yes, it saves the value in cookie
var interest2=document.getElementById("check2").value;
document.cookie= "interest2=" + interest2;
}
if(document.querySelector('.check3').checked){ //check if the checkbox
is checked if yes, it saves the value in cookie
var interest3=document.getElementById("check3").value;
document.cookie= "interest3=" + interest3;
}
document.getElementById("addform").submit();//submits the form
}
