|
-
Nov 6th, 2010, 10:18 PM
#1
Elegant way of validating radio buttons with JavaScript
This is, for the most part, a question for you, Samba! Or someone else with plenty of JavaScripting ability.
I'll explain my situation a little: for fun, I am making a form validating class -- no jQuery and no other libraries. Everything is fine, except I can't validate a group of radio buttons in an elegant way. My validation method works by looping through my form's elements collection (myForm.elements) and checking if fields are empty (as the most basic form of validation). however, I have four radio buttons in a group, so this loops through all four of them, which doesn't really allow me to validate them as easily as I would with other elements (without making a variable or something to hold the value, I guess?). so, originally I just checked if the element's type was a radio button and skipped it if so. then, I just added a custom validation handler manually. this works fine, but I just don't want to HAVE to have a custom validation handler for all radio buttons.
these are the input fields on my form:
HTML Code:
<input type="radio" name="company" id="companyOracle" value="oracle" class="required" /> <label for="companyOracle">Oracle</label><br />
<input type="radio" name="company" id="companyMicrosoft" value="microsoft" /> <label for="companyMicrosoft">Microsoft</label><br />
<input type="radio" name="company" id="companySun" value="sun" /> <label for="companySun">Sun</label><br />
<input type="radio" name="company" id="companyZend" value="zend" /> <label for="companyZend">Zend</label><br />
so, this works great currently (function-wise):
Code:
validator.handler("company", function(form){
// here, form.company is an instance of NodeList
alert(form.company.getSelectedValue());
});
the getSelectedValue() method is defined on the NodeList class:
Code:
/**
* Get the selected value of a node list (radio button list)
*
* @return string
*/
NodeList.prototype.getSelectedValue = function(){
for(var i = 0; i < this.length; i++){
if(this.item(i).checked){
return this.item(i).value;
}
}
};
but, I'd prefer to not have to create this handler thing manually.
when looping through my form elements, I check if the class 'required' is set on the element before doing any validation, which is why only one of these elements has required set here (otherwise, all 4 would cause validation). I can't use my NodeList method, though, because when I loop through the elements, the element reference I have is an instance of HTMLInputElement.
Code:
for(var i in myForm.elements){
var e = myForm.elements[i];
if(e.hasClass("error")){
// e is now an HTMLInputElement
}
}
so, I guess I'm curious if I would be able to get the NodeList reference from my HTMLInputElement (but the parentNode and other properties don't seem to do it) -- or if I can grab the form element like I did in my custom event handler, but dynamically using the element's name property, something like this:
HOPEFULLY, this makes some sense. if not, I'll try explaining it better!
Last edited by kows; Nov 6th, 2010 at 10:23 PM.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|