Re: [thelist] JavaScript Validation for Pull-Down Menus and Radio Buttons — R E S O L V E D

Jono ox4dboy at comcast.net
Wed Dec 8 13:29:56 CST 2004


I have figured it out.  Thank you everyone who replied.  Here's the  
final working code ( along with my non-JavaScript "In English"  
explanation below )  incase anyone in the future is pinned in such a  
situation:


<!-- The JS functions -->

<SCRIPT LANGUAGE="JavaScript"><!-- //Hide script from old browsers
//this handles the text fields
function isRequired(fieldobject, name) {
     var temp = fieldobject.value;
     var obj = /^(\s*)([\W\w]*)(\b\s*$)/;
     if (obj.test(temp)) { temp = temp.replace(obj, '$2'); }
     var obj = / +/g;
     temp = temp.replace(obj, " ");
     if (temp == " ") { temp = ""; }
     if (temp == "") {
         fieldobject.style.borderColor="#FF6666";
         fieldobject.style.borderWidth="2px";
         fieldobject.style.borderStyle="solid";
         window.alert("The "+name+" field is required."); return false;
     } else {
         return true;
     }
}
//this handles the drop-down menus
function isRequiredDoesNotEqual(fieldobject, doesNotEqual, name) {
     var temp = fieldobject.value;
     var obj = /^(\s*)([\W\w]*)(\b\s*$)/;
     if (obj.test(temp)) { temp = temp.replace(obj, '$2'); }
     var obj = / +/g;
     temp = temp.replace(obj, " ");
     if (temp == " ") { temp = ""; }
     if (temp == "" || temp == doesNotEqual) {
         fieldobject.style.borderColor="#FF6666";
         fieldobject.style.borderWidth="2px";
         fieldobject.style.borderStyle="solid";
         window.alert("The "+name+" field is required."); return false;
     } else {
         return true;
     }
}
//this handles the radio buttons
function isRequiredCheckedRadio(fieldobject, name) {
     var isChecked = false;
     for (i=0;i<fieldobject.length;i++) {
         if (fieldobject[i].checked) {
             isChecked = true;
         }
     }

     if (fieldobject.checked) {
         isChecked = true;
     }

     if (isChecked) {
         return true;
     } else {
         window.alert("Please select a "+name+"."); return false;
     }
}
// End hiding script from old browsers --></SCRIPT>



<!-- the form html -->
onsubmit="if(isRequiredDoesNotEqual(this.commname, 'none', 'Community  
Name') &&

<form name="ServiceRequest"  
onsubmit="if(isRequiredDoesNotEqual(this.commname, 'none', 'Community  
Name') && isRequired(this.bldnumber,'Building Number') &&  
isRequired(this.unitnumber,'Unit Number') &&  
isRequired(this.firstname,'First Name') &&  
isRequired(this.lastname,'Last Name') &&  
isRequired(this.dayphone,'Daytime Phone') &&  
isRequiredCheckedRadio(this.pets, 'if your have pets or not') &&  
isRequiredCheckedRadio(this.petsconfined, 'if your pets are confined or  
not') && isRequiredCheckedRadio(this.alarmoff, 'if your alarm is turned  
off or not') && isRequiredCheckedRadio(this.permission, 'if you have  
granted us permission to enter') &&  
isRequiredDoesNotEqual(this.problem, 'none', 'Type of Problem') &&  
isRequiredDoesNotEqual(this.location, 'none', 'Location of  
Problem')){return true;} else {return false;}" method="post"  
action="../../../../asp/test.asp">

************************************************************************ 
************************************************************************ 
****************

"I N     E N G L I S H"    E X P L A N A T I O N     O F    T H E    J  
A V A S C R I P T (for the drop-down menu(s))

Original code:
onsubmit="if(isRequiredDoesNotEqual(this.commname, 'none', 'Community  
Name')

Original Code explained in English, piece by piece, from a non-JS  
knowning perspective:

[ Step 1 ]
onsubmit= "if(...)
   ——> replace the "..." with the text that is after "function" and  
before the first "(" in the above JavaScript  — //this handles the  
drop-down menus
   ———> so you now have,  onsubmit="if(isRequiredDoesNotEqual

[ Step 2 ]
(this.commname, 'none', 'Community Name')
	     a.                  b.                       c.

——> a.) replace ".commname" (after "this" above) with the ID of the  
pulldown menu.  In this case the pulldown had  id="commname"
——> b.) replace 'none', with whatever the pulldown's first option value  
is.  In this case the pulldown had <option value="none"  
selected>Choose...</option>
——> c.) replace 'Community Name' with whatever the label for the  
pull-down is.  In this case the pull-down has a label of "Community  
Name"
                  the error pop-up will tell the user "Please select a  
Community Name" — where Community Name is what you use in ——>c.


When doing multiple checks, you MUST put — && — in between each new  
check, so for example:
onsubmit="if(isRequiredDoesNotEqual(this.commname, 'none', 'Community  
Name') && onsubmit="if(isRequiredDoesNotEqual(this.commname, 'none',  
'Community Name') && ...

The last one cannot have " && " after it.

************************************************************************ 
************************************************************************ 
****************

Hopefully some one will benefit from this in the future, that is if  
they are wise enough to search the archives.



More information about the thelist mailing list