[thelist] JavaScript Validation for Pull-Down Menus and Radio Buttons

Jono ox4dboy at comcast.net
Wed Dec 8 09:22:56 CST 2004


I am trying to learn how to do JS form field validation, and have hit a 
snag.  I have figured out how to validate text fields just fine, but I 
cannot figure out how to validate pull-down menus, and/or Radio 
buttons.  The code below (sorry if it is wrapping) is working for 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;
     }
}

On the form I use this for the text fields:

onsubmit="if(isRequired(this.id,'Display This Text in Error Popup')

[code snip]

<form name="ServiceRequest" 
onsubmit="if(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')){return true;} else {return 
false;}" method="post" 
action="../../../../asp/online-service-request.asp">

[/code snip]


I am having trouble getting the pull-downs to validate using this:

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;
     }
}

For the pull-downs, I thought that I could add the following — after 
onsubmit="if — to the previous (above) code:

(isRequiredDoesNotEqual(this.pull-downID, 'selectedvalue', 'Display 
This Text in Error Popup') &&

This is the actual code for the pull-down I am having trouble with:

[code snip]

<select id="commname" name="commname" class="request1">
		<option value="none" selected>Choose your community name...</option>
		<option value="Brookside">Brookside</option>
		<option value="Cascades">Cascades</option>
		<option value="Edmondson">Edmondson</option>
</select>

[/code snip]

So I tried:
(isRequiredDoesNotEqual(this.commname, 'Choose your community name...', 
'Community Name') &&

I can't get this to work.  There is either something wrong with
function isRequiredDoesNotEqual(fieldobject, doesNotEqual, name) {

— OR —

something wrong with:
(isRequiredDoesNotEqual(this.pull-downID, 'pull-downName', 
'pull-downDefaultValue') &&


Ordinarily I am not the one to do this type of JS work, but I am in a 
position where I have to do it, so any help would be greatly 
appreciated.  I tried using Dreamweaver's built in Validation behavior 
option, but it will only work for text fields, or so it seems?  Pull 
downs and Radio buttons do not appear in Dreamweaver's validation 
behavior pane.  It's probably just (I hope) something beyond my scope 
of knowledge.

Thanks VERY MUCH in advance!


More information about the thelist mailing list