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

[Jono]

On Dec 8, 2004, at 11:54 AM, Peter-Paul Koch 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.
>
> You don't have to. Simply check/select one option, and you can be
> certain that the server always gets a value.
>
> The code below (sorry if it is wrapping) is working for the
>> text fields:
>
> You're checking for a value, but for radio buttons you need to see
> whether they're checked.
>
>> 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;
>>      }
>> }
>>
>>

I now have the radio button checks working with this:

<!-- Javascript function snip-->
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;
     }
}

<!-- HTML snips-->
onsubmit="if(isRequiredCheckedRadio(this.permission, 'if you have  
granted us permission to enter')){return true;} else {return false;}"  
method="post" ...


where the radio button is:

<input type="radio" id="permission" name="permission" value="Yes"  
class="btn111">
	
<input type="radio" id="permission" name="permission" value="No"  
class="btn111">

<!-- End all Radio snips -->

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

Now I just need to figure out the pull-down menus to be checked with  
the — very similar — function (below):

  <!-- Pull Down Javascript function that I can't get to work -->
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;
     }
}


<!-- onsubmit HTML for pull-down that I can't get to work -->

isRequiredDoesNotEqual(this.bldnumber,'Building Number')

where the pull down is:

<!-- HTML for pull-down menu -->
<select id="commname" name="commname" class="request1">
	<option value="none" selected>Choose your community name...</option>
	<option value="Brookside Commons">Whatever1</option>
	<option value="Cascades Overlook">Whatever2</option>
	<option value="Edmondson Park">Whatever3</option>
	<option value="Ingram Manor">Whatever4</option>
	<option value="Symphony Center">Whatever5</option>
</select>

I tried — isRequiredDoesNotEqual(this.commname, 'commname', 'Community  
Name')

but it is not working?