Entry
How can I validate form input before it is submitted?
How can I validate all form fields are filled out?
Mar 16th, 2000 09:52
Martin Honnen,
The FORM element has an
ONSUBMIT
handler which you usually use to call a form validation function which
returns true to allow submission if the form is ok and which returns
false to cancel submission if the validation failed. Example
function validateForm (form) {
// check form fields and
// return false
// if not validated
// otherwise
// return true;
}
<FORM ONSUBMIT="return validateForm(this)" ...>
The following page contains a generic function validateForm which loops
through the form elements array and checks for
- text fields, textareas, passwords, file field that they contain
some input
- select elements that at least one option is selected
- radio buttons/button groups that one is checked
- for checkbox groups (single checkboxes pass validation unchecked)
that at least one checkbox is checked
Of course such a validation is usually not sufficient as you want to
validate the type of input for text fields etc. but take it as an
example to build on.
<HTML>
<HEAD>
<SCRIPT>
function validateForm (form) {
for (var e = 0; e < form.elements.length; e++) {
var el = form.elements[e];
if (el.type == 'text' || el.type == 'textarea' ||
el.type == 'password' || el.type == 'file' ) {
if (el.value == '') {
alert('Please fill out the text field ' + el.name);
el.focus();
return false;
}
}
else if (el.type.indexOf('select') != -1) {
if (el.selectedIndex == -1) {
alert('Please select a value of the select field ' + el.name);
el.focus();
return false;
}
}
else if (el.type == 'radio') {
var group = form[el.name];
var checked = false;
if (!group.length)
checked = el.checked;
else
for (var r = 0; r < group.length; r++)
if ((checked = group[r].checked))
break;
if (!checked) {
alert('Please check one of the radio buttons ' + el.name);
el.focus();
return false;
}
}
else if (el.type == 'checkbox') {
var group = form[el.name];
if (group.length) {
var checked = false;
for (var r = 0; r < group.length; r++)
if ((checked = group[r].checked))
break;
if (!checked) {
alert('Please check one of the checkboxes ' + el.name);
el.focus();
return false;
}
}
}
}
return true;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="document.formName.select1.selectedIndex = -1">
<FORM NAME="formName"
ACTION="whatever"
ONSUBMIT="return validateForm(this)"
>
<INPUT TYPE="text" NAME="aField">
<BR>
<TEXTAREA NAME="aTextArea" ROWS="3" COLS="20" WRAP="soft">
</TEXTAREA>
<BR>
<INPUT TYPE="password" NAME="aPassword">
<BR>
<SELECT NAME="select1">
<OPTION>Kibo
<OPTION>Maho
<OPTION>Xibo
</SELECT>
<BR>
<SELECT NAME="select2" MULTIPLE>
<OPTION>Kibo
<OPTION>Maho
<OPTION>Xibo
</SELECT>
<BR>
<INPUT TYPE="checkbox" NAME="aCheckbox" VALUE="Kibo">
<BR>
<INPUT TYPE="radio" NAME="aRadio" VALUE="Kibology">Kibology
<INPUT TYPE="radio" NAME="aRadio" VALUE="Xibology">Xibology
<BR>
<INPUT TYPE="checkbox" NAME="aCheckboxGroup" VALUE="Kibology">Kibology
<INPUT TYPE="checkbox" NAME="aCheckboxGroup" VALUE="Xibology">Xibology
<BR>
<INPUT TYPE="file" NAME="aFilename">
<BR>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>
