[thelist] JavaScript Validation for Pull-Down Menus and Radio Buttons
Mark Kennedy
mark at eurogamer.net
Wed Dec 8 09:41:59 CST 2004
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!
More information about the thelist
mailing list