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

[Mark Kennedy]

If 'obj' is an HTML select object, then

obj.value

...is undefined.  You have to use

obj.options[ obj.selectedIndex ]

to get a handle to an HTML option object.  So you could do:

obj.options[ obj.selectedIndex ].value

to get the selected value of the field.

Hope that helps

Mark


Jono wrote:
> 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!