[thelist] JavaScript Validation for Pull-Down Menus and Radio Buttons
Jono
ox4dboy at comcast.net
Wed Dec 8 11:29:24 CST 2004
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?
More information about the thelist
mailing list