Need Help with JS Form Validation
Hello everyone,
I could really use some help with my JS form validation project, which is not a class project, but just a project I've been working on recently in an effort to learn more about JavaScript.
I keep getting a syntax error in one of my nested if statements and can't see where I'm going wrong.
I want to (a) validate each form field, and (b) display the form data either in an alert box or in a textarea at the bottom of the web page.
I know my code is not the cleanest or most efficient, but I'd like to accomplish (a) and (b) above using my existing functions (so my code is more modular.)
I'm chasing my tail so I'd be grateful for any plain English suggestions/revisions.
Thank you very much.
HTML Code:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Validation Project</title>Code:<script type="text/javascript"> function num_checked(check_box_array) { var nchecked = 0; for (i = 0; i < check_box_array.length; i++) { if (check_box_array[i].checked) { nchecked++; } return nchecked; } //return nchecked; } function isAlphabetic(elem, helperMsg) { var alphaExp = /^[a-zA-Z]+$/; if (elem.value.match(alphaExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } function notEmpty(elem, helperMsg) { if (elem.value.length==0) { alert(helperMsg); elem.focus(); return false; } return true; } function isNumeric(elem, helperMsg) { var numericExpression = /^[0-9]+$/; if (elem.value.match(numericExpression)) { return true; } else { alert(helperMsg) elem.focus(); return false; } } function processFormData() { var name = document.getElementById('yourname'); var yearborn = document.getElementById('birthyear'); var location = document.getElementById('location'); var gradyear = document.getElementById('graduation'); var myfavorites = document.getElementById('favs'); var name_warning_alpha = "Please enter letters only for your name!"; var name_warning_missing = "Please enter your name!"; var yearborn_warning = "Please enter the year you were born!"; var location_warning = "Please select a location from the drop-down list!"; var gradyear_warning = "Please select the year you will graduate!"; var myfavorites_warning = "Please select at least one of your favorites from the options shown!"; var message = "You entered the following registration information: \n\n"; var allCorrect = true; // Set error flag to true initially if (isAlphabetic(name, name_warning_alpha)) { allCorrect = false; if (notEmpty(name, name_warning_missing)) { allCorrect = false; if (isNumeric(yearborn, yearborn_warning)) { allCorrect = false; if (num_checked(location,location_warning) == 0)) { allCorrect = false; if (num_checked(gradyear, gradyear_warning) !=1)) { allCorrect = false; if (num_checked(myfavorites, myfavorites_warning) !=1)) { allCorrect = false; } // end brace for my favorites check } // end brace for graduation year check } // end brace for location check } // end brace for year born check } // end brace for name_missing check } // end brace for name_alphabetic check if (allCorrect) { message += "Name: " + name + "<br />" + "Born: " + yearborn + "<br />" + "Home City: " + location + "<br />" + "Graduated: " + gradyear + "<br />" + "Favorites: " + myfavorites + "."; return allCorrect; alert(message); } } // end brace for processFormData function </script>HTML Code:</head> <body> <h1>Validating The Form</h1> <form name = "registration" method = "post" action = "" > <div class="question" id="yourname"> <p>Please enter your full name: <input type = "text" name = "yourname"> </div> <div class="question" id="birthyear"> <p>Please enter the year in which you were born: <input type = "text" size = "5" name = "birthyear"> </div> <div class="question" id="location"> <p>Which city did you move from? <select name="location"> <option value="0">Choose one</option> <option value="1">Omaha</option> <option value="2">Toledo</option> <option value="3">Indianapolis</option> <option value="4">Chicago</option> </select> </div> <div class="question" id="graduation"> <p>When did you graduate from high school?<br> <input type = "radio" name = "graduation" value = "2010">1985<br> <input type = "radio" name = "graduation" value = "2011">1986<br> <input type = "radio" name = "graduation" value = "2012">1987<br> <input type = "radio" name = "graduation" value = "2013">1988<br> </div> <div class="question" id="favs"> <p>What were your favorite things about the campus tour today? (Choose 1 to 3 options): <ol start="0"> <li><input type="checkbox" name="favs" value="food">Tasty food <li><input type="checkbox" name="favs" value="facilities">Modern facilities <li><input type="checkbox" name="favs" value="programs">Interesting programs </ol> </div> <p> <input type = "reset"> <input type = "submit" value = "Submit" onClick = "return processFormData();"> </form> </body> </html>
Originally Posted by SteveS
