window.onload = init;
// The "onload" handler. Run after the page is fully loaded.
function init() {
// Attach "onsubmit" handler
document.getElementById("feedback").onsubmit = validateForm;
// Set initial focus
document.getElementById("nameinput").focus();
}
/* The "onsubmit" handler to validate the input fields.
* Most of the input validation functions take 2 arguments:
* inputId or inputName: the "id" of the element to be validated
* or "name" for checkboxes and radio buttons.
* errorMsg: the error message to be displayed if validation fails.
* The message shall be displayed on an element with id of
* inputID+"Error" if it exists; otherwise via an alert().
*/
function validateForm() {
if (isNotEmpty("nameinput", "Please enter your name!")
&& isValidEmail("emailinput", "Enter a valid email!")
&& isNumeric("phoneinput", "Please enter a 5-digit zip code!")
&& isSelected("agegroup1", "Please make a selection!")
&& isChecked("enjoysurfing1", "Please check a gender!")){
alert("Hello")
alert("Thank you for your submission!");
return true;
} else {
return false;
}
}
// Return true if the input value is not empty
function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0); // boolean
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
/* If "isValid" is false, print the errorMsg; else, reset to normal display.
* The errorMsg shall be displayed on errorElement if it exists;
* otherwise via an alert().
*/
function showMessage(isValid, inputElement, errorMsg, errorElement) {
if (!isValid) {
// Put up error message on errorElement or via alert()
if (errorElement !== null) {
errorElement.innerHTML = errorMsg;
} else {
alert(errorMsg);
}
// Change "class" of inputElement, so that CSS displays differently
if (inputElement !== null) {
inputElement.className = "error";
inputElement.focus();
}
} else {
// Reset to normal display
if (errorElement !== null) {
errorElement.innerHTML = "";
}
if (inputElement !== null) {
inputElement.className = "";
}
}
}
// Return true if the input value is a valid email address
// (For illustration only. Should use regexe in production.)
function isValidEmail(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value;
var atPos = inputValue.indexOf("@");
var dotPos = inputValue.lastIndexOf(".");
var isValid = (atPos > 0) && (dotPos > atPos + 1) && (inputValue.length > dotPos + 2);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
// Return true if the input value contains only digits (at least one)
function isNumeric(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value.trim();
var isValid = (inputValue.search(/^[0-9]+$/) !== -1);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}
// Return true if selection is made (not default of "") in