Classic Joke
A man lay sprawled across three entire seats in the posh theatre. When the usher came by and noticed this, he whispered to the man, "Sorry, sir, but you're only allowed one seat." The man groaned but didn't budge. The usher became impatient. "Sir, if you don't get up from there I'm going to have to call the manager." Again, the man just groaned, which infuriated the usher who turned and marched briskly back up the aisle in search of his manager.
In a few moments, both the usher and the manager returned and stood over the man. Together the two of them tried repeatedly to move him, but with no success. Finally, they summoned the police. The cop surveyed the situation briefly then asked, "All right buddy, what's your name?" "Sam," the man moaned. "Where ya from, Sam?" With pain in his voice Sam replied "The balcony."
Basic Form Validation Function
Well lately on the forum people have been asking how to do a quick and simple validation on the form to check if all of the fields are filled in. This just makes sure that everything is filled in.
When the form is submitted, it will execute the function and determine which fields are not filled in. It looks at the field type and determines which parameter to check (length or checked). The form displays an error message and highlights the fields that are left blank. The field with the first error is also scrolled into view. If all fields are filled in it allows the form to be submitted.
If anyone wants anything explained, just asked!
<html>
<head>
<style type="text/css">
.error{background-color:red;}
.normal{}
</style>
<script type="text/javascript">
var errorElem;
var strRadio;
var errorCount;
var alertMessage = " error(s) found!\n\nAll fields must be filled in before submitting the form.";
function ValidateForm(xForm){
errorElem = false;
strRadio = "";
errorCount = 0;
for(i=0;i<xForm.elements.length;i++){
xForm.elements[i].className = "normal";
SubVal(xForm,xForm.elements[i]);
}
if(errorElem){
errorElem.focus();
ScrollToElement(errorElem);
alert(errorCount + alertMessage);
return false;
}
else{
return true;
}
}
function SubVal(xForm,xElem){
switch(xElem.type.toLowerCase()){
case "text":
case "textarea":
if(xElem.value.length==0){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
break;
case "checkbox":
if(!xElem.checked){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
break;
case "select-one":
case "select-multiple":
if(xElem.selectedIndex == -1){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
break;
case "radio":
if(strRadio.indexOf("^tree^") == -1){
if(!RadioCheck(xForm,xElem.name)){
xElem.className = "error";
if(!errorElem) errorElem = xElem;
errorCount++;
}
}
break;
}
}
function RadioCheck(xForm,xElemName){
strRadio += "^" + xElemName + "^";
var radElem = document.forms[xForm.name].elements[xElemName];
for(ix=0;ix<radElem.length;ix++){
if(radElem[ix].checked) return true;
}
return false
}
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
</head>
<body>
<form name="Form1" onsubmit="return ValidateForm(this)">
<h3>Text Boxes</h3>
<input type="text" name="t1">
<input type="text" name="t2">
<input type="text" name="t3">
<h3>Text Areas</h3>
<textarea name="ta1"></textarea>
<textarea name="ta2"></textarea>
<textarea name="ta3"></textarea>
<h3>Checkboxes</h3>
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb2">
<input type="checkbox" name="cb3">
<h3>Select</h3>
<select name="s1">
<option>Shona</option>
</select>
<select name="s1" size="3" multiple>
<option>Shona</option>
<option>professional</option>
<option>dog walker</option>
</select>
<h3>Radio</h3>
R1
<input type="radio" name="r1" value="1">
<input type="radio" name="r1" value="2">
<input type="radio" name="r1" value="3">
<input type="radio" name="r1" value="4">
<input type="radio" name="r1" value="5">
<br/>
R2
<input type="radio" name="r2" value="1">
<input type="radio" name="r2" value="2">
<input type="radio" name="r2" value="3">
<input type="radio" name="r2" value="4">
<input type="radio" name="r2" value="5">
<br/>
R3
<input type="radio" name="r3" value="1">
<input type="radio" name="r3" value="2">
<input type="radio" name="r3" value="3">
<input type="radio" name="r3" value="4">
<input type="radio" name="r3" value="5">
<br/><br/>
<input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>
Hope that helps!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages