//alert ("Have no fear, Javascript is here."); ////////////////////////////////////////////////////////////////////////////////////// /// Validate that the field is not empty function ////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// //this function is passed two arguments by the calling code, the inputField and the element on the page that will hold the error message function validateNonEmpty(inputField, errorText) { //alert("in validateNonEmpty"); //first the function checks to see if there is any data in the input field if(inputField.value.length == 0) {//if it is empty... if (errorText != null) {//it looks to see if the area for the error text exists errorText.innerHTML = "Please enter a value."//if it does exist it displays this text } //alert("This was empty."); return false;//and the function returns "false" to let the calling code know that the field WAS empty } else { //but if there is data in the field... if (errorText != null) {//it checks to see if the error message area exists errorText.innerHTML = ""; //then it clears any value that might be there } return true;//then it tells the calling code that the field had data in it }//end of "if (inputField.value.length==0) if statement }//end of validateNonEmpty function ////////////////////////////////////////////////////////////////////////////////////// /// Validate Length function ////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// function validateLength(minLength, maxLength, inputField, errorText) { //alert("in validateLength"); //alert("The minLength is: " + minLength + " and the maxLength is " + maxLength); if ((inputField.value.length < minLength) || (inputField.value.length > maxLength)) { //the data is invalid so set the errorText if (errorText != null) {//does the errorText span exist on the page? //print out this text on the screen errorText.innerHTML = "Please enter a value between " + minLength + " and " + (maxLength + 1) + " characters."; } //end of if (errorText) return false;//tell the requesting code that the field is not valid } else {//if it IS valid... if (errorText != null) { errorText.innerHTML = "";//clears any errorText value on the page }//end of if (errorText) return true;//tell the requesting code that the field is not blank }//end of length test if }//end of function ////////////////////////////////////////////////////////////////////////////////////// /// Validate List Function////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// function validateListPermission(checkedRadio, errorText) { //alert("in validateListPermission"); //if the user has not made a selection (tested when the user tries to submit without making a selection) the errorText will display the error message if (!checkedRadio.value) { if (errorText != null) { errorText.innerHTML = "Please make a selection."; return false; }//end of if } else if (checkedRadio.value == "yes") {//but if the user has selected YES ... if (errorText != null) { errorText.innerHTML = "Thanks for signing up for our list!";//the form will thank them }//end of if return true;//and the function will return true } else { if (errorText != null) {//but if the user has selected NO ... errorText.innerHTML = "You will not receive the Kit & Colloodle newsletter.";//the form will acknowledge that choice... }//end of if return true;//and still return true }//end of main testing if statement }//end of function ////////////////////////////////////////////////////////////////////////////////////// /// Validate Regular Expression Function////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// //This function uses the test method of the regex object to test a supplied string //to see if it matches the supplied regex pattern function validateRegEx (regex, inputStr, errorText, errorMsg) { //alert("in validateRegEx"); //see if the inputStr data validates OK if(!regex.test(inputStr)) {//regex is an existing object in javascript that can perform a "test", this tests the input string and sees if it is false //the date is invalid, so set an error message and return false if (errorText != null) { errorText.innerHTML = errorMsg; }//end errorText test return false; } else {//the date is OK so clear the error message and return true if (errorText != null) { errorText.innerHTML = ""; }//end errorText test return true; }//end of if !regex.test }//end of validateRegEx function ////////////////////////////////////////////////////////////////////////////////////// /// Validate Zip Code function ////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// function validateZip(inputField, errorText) { //alert("in validateZip"); if(inputField.value.length != 5) {//if the zip entered is not five digits... if(errorText != null) { errorText.innerHTML="Please enter a zip code that is 5 digits in length."; } return false; } else if (isNaN(inputField.value)){//else if the zip entered is not numbers if(errorText != null) { errorText.innerHTML="Please enter only numbers."; } return false; } else { if(errorText != null) { errorText.innerHTML=""; //clear the errorText if it's valid } return true; } }//end of validateZip function ////////////////////////////////////////////////////////////////////////////////////// /// ValidateEmail function ////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// //This function uses a regular expression pattern to see if the input value //appears to be a valid e-mail address function validateEmail (inputField, errorText) { //alert("in validateEmail"); //first check to see if the inputField has data if(!validateNonEmpty(inputField, errorText)) {//if the validateNonEmpty returns false... //alert("this is blank"); return false; // return this as false as well }//end if statement //then see if the input value is a valid email using regular expressions return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/, inputField.value, errorText, "Please enter a valid email address (for example: Kit@colloodle.com)"); }//end of validateEmail function ////////////////////////////////////////////////////////////////////////////////////// /// ValidateEmail function ////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// //This function uses a regular expression pattern to see if the input value //appears to be a valid phone number function validatePhone (inputField, errorText) { //alert("in validatePhone"); //first check to see if the inputField has data if(!validateNonEmpty(inputField, errorText)) {//if the validateNonEmpty returns false... //alert("this is blank"); return false; // return this as false as well }//end if statement //then see if the input value is a valid phone number using regular expressions return validateRegEx(/^\d{3}-\d{3}-\d{4}$/, inputField.value, errorText, "Please enter a phone number like 123-555-1212"); }//end of validateEmail function ////////////////////////////////////////////////////////////////////////////////////// /// Sign Up function ////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////// //this function runs all of the above functions at once - just in case the user //has tried to submit the form without filling out any data function signUpSubmit(form) { if (validateLength(5, 20, form["new_username"], form["usernameError"]) && validateNonEmpty(form["new_firstname"], form["firstnameError"]) && validateNonEmpty(form["new_lastname"], form["lastnameError"]) && validateEmail(form["new_email"], form["emailError"]) && validateListPermission(form["list_permission"], form["listError"]) && validateZip(form["zipcode"], form["zipcodeError"]) && validateLength(5, 15, form["password1"], form["password1Error"]) && validateLength(5, 15, form["password2"], form["password2Error"])) { //if all those conditions return true, submit the form to the server //alert("In signUpSubmit"); form.submit(); } else { alert ("I'm sorry but there was an error. Please check your data and try again."); }//end of if/else statement*/ }//end of signUpSubmit function