scriptygoddessIt is usually recommended to do some javascript validation on a form before it's sent. This way, you don't have to waste server resources doing this. (It's still recommended to do some server side validation as well – but hopefully you can cut out some of the mistakes with the client side/javascript validation).
So, what I do is create one "validate()" function that goes through the form and checks each required field to make sure it has something filled in and checks to make sure email fields are contructed properly, etc. So it looks something like this:
function validate() {
//check a field to make sure it has something filled in
if(document.formName.textFieldName.value == '') {
alert('Please fill out textFieldName.');
document.formName.textFieldName.focus();
return false;
}
//offer the person the option of leaving a field blank
if(document.formName.textFieldName2.value == '') {
if(!confirm("Are you sure you want to leave this field blank?\n Hit 'ok' to continue, or hit 'cancel' to go back and make changes.")) {
return false;
}
}
// side note: the "\n" in the confirm window will make a new line
/*
if you're validating a FILE upload field - and want to make sure the extension matches what you expect, I create a function (look for it at the bottom) to check to make sure the file extension is correct
*/
if (!filterFileType(document.formName.fileUploadField, "gif")) {
/* the "!" in the line above means "not" so it reverses the value of whatever is next to it. So, since an "if" statement will only run if whatever in the () is true, we want to check to see if the file in the upload field ends with .gif - if it doesn't the filterFileType would return false - the "!" makes the statment "true" thereform the if statement runs the next line */
alert("Please submit .gif only type files");
document.formName.fileUploadField.focus();
return false;
}
//Get the value of which radio button is selected
// valRadioButton is a function I define below
var radioVal = valRadiobutton(document.formName.radioGroup);
//make sure that they actually selected one of the radio buttons:
if (radioVal == '') {
alert("Please select one of those radio buttons!");
return false;
}
//check email field (to make sure it's not blank)
if(document.formName.emailField.value == '') {
alert('You must enter in your email.');
document.formName.emailField.focus();
return false;
} else {
//Now check if email is valid
if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.formName.emailField.value))) {
alert("The email you entered is not a valid email address.");
document.formName.emailField.focus();
return false;
}
}
//if we made it this far - then everything must be filled out okay
return;
} // end validate functionfunction filterFileType(field, ext) {
if (field.value.indexOf('.' + ext) == -1) {
return false;
}
return true;
} // end function filterFileType
function valRadiobutton(radiobutton) {
myOption = -1;
for (i=0; i< radiobutton.length; i++) {
if (radiobutton[i].checked) {
myOption = i;
}
}
if (myOption == -1) {
return "";
} else {
return radiobutton[myOption].value
}
} // end function valRadioButton
Just some info for the people who aren't up to speed on javascript – you'll see this type of line: document.formName.textFieldName.value throughout this script. Just a breakdown of what that line means, and where you'd have to customize it:
document – doesn't change. references the current document (html page)
formName – this does change. In your form tag, make sure you add somethingline name="formName" (where formName is whatever you name your form – can be almost anything).
textFieldName – this also changes. When you have a element in a form (ie, text field, text area, etc.) you'll also have a name="textFieldName" (again, where textFieldName is whatever you name the field)
value – this grabs the text that's been entered in (or whatever was prefilled). so this:
<input type="text" name="textfield" value="this is the text you see">
looks like this
So the last thing is, to get this validate stuff to run, you'll add this into your form tag:
onSubmit="return validate()"
