Bob
Reputation: 91
Validating Form Data With Javascript
I asked a question yesterday and with everyone's advice, I was able to get my switch statement working (well sort of). I am still having two issues:
The switch statement is now working, well sort of. Thanks for all the advice. I am having two issues, though.
1.) If my course and section don't match, I get the validation message telling me to that my section isn't valid (Great!), but after clicking ok, it still advances to the confirmation message and then the form processor page. Any advice on how to prevent this?
2.) At the confirmation message, if I click cancel, I get the correct message that my registration has been canceled (Great!), but it still advances to the form processor page...telling me that my form has been submitted. Any advice on how to prevent this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--Document Head-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Title Element-->
<title>Greendale Community College</title>
<!--Style Element-->
<style type="text/css">
body {
background-color: white;
}
h1 {
text-align: center;
font-family: Impact;
color: green;
}
p {
font-size: 72px;
color: green;
}
</style>
<!--Script Element-->
<script type="text/javascript">
/* <![CDATA[ */
// function to validate and create message confirm box
function submitRegistration() {
var fName = document.registration.firstName.value;
var lName = document.registration.lastName.value;
var cwid = document.registration.cwid.value;
var semester = document.registration.semester.value;
var course = document.registration.courses.value;
var section = document.registration.section.value;
var major = document.registration.needForMajor.value;
var semesterDisplay;
// To display semester info in confirm message
if (semester == "fall")
semesterDisplay = "Fall";
if (semester == "spring")
semesterDisplay = "Spring";
if (semester == "summer")
semesterDisplay = "Summer";
//To display major requirement in confirm message
var checkDisplay;
if (document.registration.needForMajor.checked == true) {
checkDisplay = "Course Needed For Major";
}
else {
checkDisplay = "";
}
//Validates first name
if (fName == "") {
window.alert("You must enter your first name!");
return false;
}
//Validates that first name is non-numeric
if (isNaN(fName) == false) {
window.alert("Your First Name must be non-numeric values!");
return false;
}
//Validates last name
if (lName == "") {
window.alert("You must enter your last name!");
return false;
}
//Validates that last name is non-numeric
if (isNaN(lName) == false) {
window.alert("Your Last Name must be non-numeric values!");
return false;
}
//Validates CWID
if (cwid == "") {
window.alert("You must enter your cwid!");
return false;
}
//Validates that CWID is numeric
if (isNaN(cwid) == true) {
window.alert("Your CWID must be numeric values!");
return false;
}
//Validates semester
var validateSemester = false;
for (var i = 0; i < 3; ++i) {
if (document.registration.semester[i].checked == true) {
validateSemester = true;
break;
}
}
if (validateSemester != true) {
window.alert("You must select a Semester!");
return false;
}
//Validates course
if (course == "") {
window.alert("You must select a Course!");
return false;
}
// Validates that the course and section are compatible
var error = true;
switch (course) {
case "CIS 100":
if (section == '100001') {
} else if (section == '100gw1') {
} else {
window.alert("You must select a valid section for CIS 100!");
error = false;
}
break;
case "CIS 120":
if (section == '120001') {
} else if (section == '120gw1') {
} else {
window.alert("You must select a valid section for CIS 120!");
error = false;
}
break;
case "CIS 220":
if (section == '220001') {
} else if (section == '220gw1') {
} else {
window.alert("You must select a valid section for CIS 220!");
error = false;
}
break;
case "CIS 299":
if (section == '299001') {
} else if (section == '299gw1') {
} else {
window.alert("You must select a valid section for CIS 299!");
error = false;
}
break;
case "CIS 302":
if (section == '302gw1') {
} else {
window.alert("You must select a valid section for CIS 302!");
error = false;
}
break;
case "CIS 304":
if (section == '304001') {
} else if (section == '304gw1') {
} else {
window.alert("You must select a valid section for CIS 304!");
error = false;
}
break;
case "CIS 321":
if (section == '321001') {
} else if (section == '321gw1') {
} else {
window.alert("You must select a valid section for CIS 321!");
error = false;
}
break;
case "CIS 322":
if (section == '322gw1') {
} else {
window.alert("You must select a valid section for CIS 322!");
error = false;
}
break;
case "CIS 325":
if (section == '325gw1') {
} else {
window.alert("You must select a valid section for CIS 325!");
error = false;
}
break;
case "CIS 330":
if (section == '330001') {
} else if (section == '330gw1') {
} else {
window.alert("You must select a valid section for CIS 330!");
error = false;
}
break;
case "CIS 332":
if (section == '332001') {
} else if (section == '332gw1') {
} else {
window.alert("You must select a valid section for CIS 332!");
error = false;
}
break;
case "CIS 341":
if (section == '341001') {
} else if (section == '341gw1') {
} else {
window.alert("You must select a valid section for CIS 341!");
error = false;
}
break;
case "CIS 343":
if (section == '34301a') {
} else if (section == '34301b') {
} else {
window.alert("You must select a valid section for CIS 343!");
error = false;
}
break;
case "CIS 352":
if (section == '352gw1') {
} else {
window.alert("You must select a valid section for CIS 352!");
error = false;
}
break;
case "CIS 354":
if (section == '354001') {
} else if (section == '354gw1') {
} else {
window.alert("You must select a valid section for CIS 354!");
error = false;
}
break;
case "CIS 401":
if (section == '401gw1') {
} else {
window.alert("You must select a valid section for CIS 401!");
error = false;
}
break;
case "CIS 419":
if (section == '419x01') {
} else {
window.alert("You must select a valid section for CIS 419!");
error = false;
}
break;
case "CIS 490":
if (section == '490001') {
} else if (section == '490gw1') {
} else {
window.alert("You must select a valid section for CIS 490!");
error = false;
}
break;
case "CIS 492":
if (section == '492gw1') {
} else {
window.alert("You must select a valid section for CIS 492!");
error = false;
}
break;
case "MAT 195":
if (section == '195001') {
} else if (section == '195w01') {
} else {
window.alert("You must select a valid section for MAT 195!");
error = false;
}
break;
case "MAT 215":
if (section == '215001') {
} else if (section == '215w01') {
} else {
window.alert("You must select a valid section for MAT 215!");
error = false;
}
break;
case "MAT 225":
if (section == '225001') {
} else if (section == '225w01') {
} else {
window.alert("You must select a valid section for MAT 225!");
error = false;
}
break;
case "MAT 281":
if (section == '281001') {
} else if (section == '281w01') {
} else {
window.alert("You must select a valid section for MAT 281!");
error = false;
}
}
//Validates section
if (section == "") {
window.alert("You must select a Section!");
return false;
}
//Confirm message
var confirmation = window.confirm("Student Name: " + fName + " " + lName + " CWID: " + cwid + " Semester: " + semesterDisplay + " Course: " + course + " Section: " + section + " " + checkDisplay);
//Ok and Cancel buttons
if (confirmation) {
window.alert("You have been registered for your course!");
}
else {
window.alert("Your registration has been canceled.");
}
}
//Reset function
function resetRegistration() {
var resetForm = window.confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}
//Functions for mouseover and mouseout
function mouseOver(target) {
target.src = 'greendale_paper.png'
target.alt = 'paper'
}
function mouseOut(target) {
target.src = 'greendale.jpg'
target.alt = 'greendale'
}
/* ]]> */
</script>
</head>
<body>
<!--Heading Element-->
<h1>Greendale Community College</h1>
<!--Added a mouseover and mouseout-->
<center><img src="greendale.jpg" alt="greendale" width="560" height="315"
onmouseover="mouseOver(this)"
onmouseout="mouseOut(this)"
/></center>
<h3 align="center">Greendale Community College Orientation Video</h3>
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/i3z5QO2O3cU" frameborder="0"></iframe></center>
<h2 align="center">Course Registration Page</h2>
<form action="FormProcessor.html" name="registration" method="get"
onsubmit="return submitRegistration()"
onreset="return resetRegistration()">
<h3>Student Information Form</h3>
<!--Student Information-->
First Name:<input type="text" name="firstName"/><br />
Last Name:<input type="text" name="lastName"/><br />
CWID:<input type="text" name="cwid" size="8" /><br />
<h3>Semester</h3>
<h4>(choose a semester)</h4>
<!--Radio Buttons to Choose Semester-->
<input type="radio" name="semester" value="fall" /> Fall 2018 <br />
<input type="radio" name="semester" value="spring" /> Spring 2018 <br />
<input type="radio" name="semester" value="summer" /> Summer 2018 <br />
<h3>Courses</h3>
<h4>(choose one course)</h4>
<table>
<!--Drop Down Box for Courses-->
<tr><td style="background:white;border:0">Courses:</td>
<td>
<select name="courses" size="1">
<option value=""></option>
<option value="CIS 100">CIS 100 Intro to CIS</option>
<option value="CIS 120">CIS 120 Application Prog I</option>
<option value="CIS 220">CIS 220 Application Prog II</option>
<option value="CIS 299">CIS 299 System Analysis I</option>
<option value="CIS 302">CIS 302 Visual Programming</option>
<option value="CIS 304">CIS 304 Cobol</option>
<option value="CIS 321">CIS 321 DB Mgt Sys and Design</option>
<option value="CIS 322">CIS 322 DB App Development</option>
<option value="CIS 325">CIS 225 Dec Support Systems</option>
<option value="CIS 330">CIS 330 Web Programming I</option>
<option value="CIS 332">CIS 332 Web Programming II</option>
<option value="CIS 341">CIS 341 CISCO CCNA I</option>
<option value="CIS 343">CIS 343 CISCO CCNA III</option>
<option value="CIS 352">CIS 352 Global Ethics in Comp</option>
<option value="CIS 354">CIS 354 Sys Project Mgt</option>
<option value="CIS 401">CIS 401 Concepts Enter Res Planning</option>
<option value="CIS 419">CIS 419 CIS Internship</option>
<option value="CIS 490">CIS 490 Systems Analysis II</option>
<option value="CIS 492">CIS 492 Systems Dev and Imp</option>
<option value="MAT 195">MAT 195 Discrete Math Structures</option>
<option value="MAT 215">MAT 215 Statistics</option>
<option value="MAT 225">MAT 225 Business Statistics</option>
<option value="MAT 281">MAT 281 Calculus I</option>
</select>
</td>
</tr>
</table>
<h3>Sections</h3>
<h4>(choose one section)</h4>
<table>
<tr><td style="background:white;border:0">Section Numbers:</td>
<td>
<!--Selection Box-->
<select name="section" multiple="multiple" size="5">
<option value=""></option>
<option value="100001">CIS 100 001</option>
<option value="100gw1">CIS 100 GW1</option>
<option value="120001">CIS 120 001</option>
<option value="120gw1">CIS 120 GW1</option>
<option value="220001">CIS 220 001</option>
<option value="220gw1">CIS 220 GW1</option>
<option value="299001">CIS 299 001</option>
<option value="299gw1">CIS 299 GW1</option>
<option value="302gw1">CIS 302 GW1</option>
<option value="304001">CIS 304 001</option>
<option value="304gw1">CIS 304 GW1</option>
<option value="321001">CIS 321 001</option>
<option value="321gw1">CIS 321 GW1</option>
<option value="322gw1">CIS 322 GW1</option>
<option value="325gw1">CIS 325 GW1</option>
<option value="330001">CIS 330 001</option>
<option value="330gw1">CIS 330 GW1</option>
<option value="332001">CIS 332 001</option>
<option value="332gw1">CIS 332 GW1</option>
<option value="341001">CIS 341 001</option>
<option value="341gw1">CIS 341 GW1</option>
<option value="34301a">CIS 343 01A</option>
<option value="34301b">CIS 343 01B</option>
<option value="352gw1">CIS 352 GW1</option>
<option value="354001">CIS 354 001</option>
<option value="354gw1">CIS 354 GW1</option>
<option value="401gw1">CIS 401 GW1</option>
<option value="419x01">CIS 419 X01</option>
<option value="490001">CIS 490 001</option>
<option value="490gw1">CIS 490 GW1</option>
<option value="492gw1">CIS 492 GW1</option>
<option value="195001">MAT 195 001</option>
<option value="195w01">MAT 195 W01</option>
<option value="215001">MAT 215 001</option>
<option value="215w01">MAT 215 W01</option>
<option value="225001">MAT 225 001</option>
<option value="225w01">MAT 225 W01</option>
<option value="281001">MAT 281 001</option>
<option value="281w01">MAT 281 W01</option>
</select>
</td>
</tr>
</table>
<!--Checkbox-->
<input type="checkbox" name="needForMajor" />
Check if the course is required for your major!<br />
<!--Submit and Reset Buttons Created-->
<input type="submit" name="submit" value="Submit"/><br />
<input type="reset" name="reset" value="Reset"/>
</form>
</body>
</html>
Upvotes: 1
Views: 73
Answers (3)
Colin Maxfield
Reputation: 162
The other answers have done a good job at addressing your issue but to improve readability (and maybe even have avoided this problem in the first place) did you think of replacing the switch statement with something else? Maybe like having an object with the keys of the classes and the values as lists of the available sections like this:
var availableSections = {
'CIS 100': ['100001', '100gw1'],
...
}
if (!availableSections[course] || availableSections[course].indexOf(section) < 0) {
window.alert("You must select a valid section for " + course + "!");
return false;
}
Upvotes: 0
Chris Stage
Reputation: 187
You don't seem to be doing anything with the error = false. Maybe you meant return false;
Anyway, you can add a if statement that checks the value of error and returns false based off it:
break;
case "MAT 225":
if (section == '225001') {
} else if (section == '225w01') {
} else {
window.alert("You must select a valid section for MAT 225!");
error = false;
}
break;
case "MAT 281":
if (section == '281001') {
} else if (section == '281w01') {
} else {
window.alert("You must select a valid section for MAT 281!");
error = false;
}
}
if (error==false){
return false;
}
Also, you need to return false on your alert for it to cancel correctly:
//Ok and Cancel buttons
if (confirmation) {
window.alert("You have been registered for your course!");
}
else {
window.alert("Your registration has been canceled.");
return false;
}
Upvotes: 1
serdar.sanri
Reputation: 2228
I think you need return false in these blocks also you set an error variable in those checks but it doesn't return so basically you have a false variable then continues next.
//Ok and Cancel buttons
if (confirmation) {
window.alert("You have been registered for your course!");
}
else {
window.alert("Your registration has been canceled.");
return false;
}
Upvotes: 0