You are here: irt.org | FAQ | JavaScript | Form | 5 | Q1213 [ previous next ]
It is possible using JavaScript. It really depends on what form fields you have present in your form as to what JavaScript form validation you perform.
If you are not interested in support for Netscape Navigator 2 or Microsoft Internet Explorer 3, then you can write some generic code that interrogates all the form elements and depending on their type performs relevant validation.
If you must support Netscape Navigator 2 and Internet Explorer 3 then you need some clue as to what each form elements type is, by using the form elements name.
The following provides a way for all browsers:
<script language="JavaScript"><!--
function validateValues(what) {
var valid = true;
var checkBoxes = false;
var checkboxChecked = false;
var radioButtons = false;
var radioChecked = false;
for (var i=0, j=what.elements.length; i<j; i++) {
myName = what.elements[i].name;
if (myName.indexOf('radio') > -1) {
radioButtons = true;
if (what.elements[i].checked) radioChecked = true;
}
if (myName.indexOf('checkbox') > -1) {
checkBoxes = true;
if (what.elements[i].checked) checkboxChecked = true;
}
if (myName.indexOf('hidden') > -1 || myName.indexOf('password') > -1 || myName.indexOf('text') > -1)
if (what.elements[i].value == what.elements[i].defaultValue) valid = false;
if (myName.indexOf('select') > -1)
if (what.elements[i].selectedIndex == 0) valid = false;
}
if ((checkBoxes && !checkboxChecked) || (radioButtons && !radioChecked)) valid = false;
if (!valid)
alert('Form not completely filled');
return valid;
}
//--></script>
<script language="JavaScript1.1"><!--
function validateValues(what) {
var valid = true;
var checkBoxes = false;
var checkboxChecked = false;
var radioButtons = false;
var radioChecked = false;
for (var i=0, j=what.elements.length; i<j; i++) {
myType = what.elements[i].type;
if (myType == 'radio') {
radioButtons = true;
if (what.elements[i].checked) radioChecked = true;
}
if (myType == 'checkbox') {
checkBoxes = true;
if (what.elements[i].checked) checkboxChecked = true;
}
if (myType == 'hidden' || myType == 'password' || myType == 'text' || myType == 'textarea')
if (what.elements[i].value == what.elements[i].defaultValue) valid = false;
if (myType == 'select-one' || myType == 'select-multiple')
if (what.elements[i].selectedIndex == 0) valid = false;
}
if ((checkBoxes && !checkboxChecked) || (radioButtons && !radioChecked)) valid = false;
if (!valid)
alert('Form not completely filled');
return valid;
}
//--></script>
<form name="myForm" onSubmit="return validateValues(document.myForm)">
<br><input name="checkbox1" type="checkbox"><input name="checkbox2" type="checkbox">
<br><input name="hidden" type="hidden" value="hidden value">
<br><input name="password" type="password" value="password value">
<br><input name="radio" type="radio"><input name="radio" type="radio">
<br><input name="text" type="text" value="text value">
<br><textarea name="textarea">textarea value</textarea>
<br><select name="select1">
<option selected>Select One:
<option>1
<option>2
<option>3
</select>
<br><select name="select2" multipe size="2">
<option selected>Select One:
<option>1
<option>2
<option>3
</select>
<br><input type="submit">
</form>Note it only detects for a miminum of one radio button, and a minimum of one checkbok being selected per form. Any more would require more complex validation.