...

View Full Version : Form validation: Selecting a checkbox option



Francofille
08-07-2002, 10:01 PM
I'd like to ensure that users select one of the checkbox options in multiple sections of a form.

Below I have pasted the code for the function I've used which works for one checkbox set ("coverage"). However, I am unsure of how to make this work for another set of checkboxes (called "limit"; this code is at the bottom).

Thanks


function submitIt(appForm){

coverageChoice=appForm.coverage.selectedIndex
if(appForm.coverage.options[coverageChoice].value==""){
alert("Please select a coverage")
return false
}
}

//End hiding script-->

<!--Section of code with checkboxes:

<td width="17%">
<select name="coverage">
<option value="" selected>Choose a coverage
<option value="GL">GL
<option value="Professional">Professional
<option value="Property">Property (attach accord app)
</select>
</td>
<td width="17%">
<select name="limit">
<option value="" selected>Choose a limit
<option value="100/100">100/100
<option value="300/300">300/300
<option value="500/500">500/500
</select>
</td>
-->

Thanks for your help!
Jennifer

RadarBob
08-08-2002, 12:19 AM
First, you need to add a line to your function so that it always returns something.

08-07-2002 03:01 PM


function submitIt(appForm){
coverageChoice=appForm.coverage.selectedIndex

if(appForm.coverage.options[coverageChoice].value==""){
alert("Please select a coverage")
return false
}
return true;
}


Now, change the function so you pass, not the entire form, but just the checkbox set. Also notice I renamed the function so when you call it, it "sounds right" when you use it.

BTW, I don't believe "selectedIndex" or "options" are properties of checkboxes. They are properties of <select> objects (aka comboboxes).

Here's something I found:

If multiple objects on the same form have the same NAME attribute, an array of the given name is created automatically. Each element in the array represents
an individual Form object. Elements are indexed in source order starting at 0. For example, if two Text elements and a Button element on the same form
have their NAME attribute set to "myField", an array with the elements myField[0], myField[1], and myField[2] is created. You need to be aware of this
situation in your code and know whether myField refers to a single element or to an array of elements.


I take this to mean that we can use the array object properties (e.g. "length")



function itemChecked (thegroup) {
var wasSelected = new Boolean (false);

for (var i=0; i<thegroup.length; i++) {
if (thegroup[i].checked) {
wasSelected = true;
}
}
return wasSelected;
} // function itemSelected()


Now you use the function thus:


if (itemChecked (appForm.coverage) {
// a good thing, continue processing
}else{
// alert the user to check something
// and/or set a master error switch, etc.
}


See how "if itemChecked" seems to be self explanatory; compared to "if submitIt"? Make function names say what they do; in this case, making sure something was checked.

adios
08-08-2002, 01:15 AM
<script type="text/javascript" language="javascript">

var msg = new Object();
msg['coverage'] = 'Please select a coverage.';
msg['limit'] = 'Please select a coverage limit.';

function check_selects(f) {
var el, e = 0;
while (el = f.elements[e++]) {
if (el.type == 'select-one' && el[el.selectedIndex].defaultSelected) {
alert(msg[el.name]);
el.focus();
return false;
}
}
}

</script>
</head>
<body>
<form onsubmit="return check_selects(this)">

http://www.idocs.com/tags/forms/_SELECT.html

whammy
08-08-2002, 01:38 AM
That is very elegant adios!.. however, although I can understand the process now, I wouldn't have understood that at ALL 6 months ago! (I have learned a LOT from you, dude - and I'm still learning! You should make your own programming logic website - alternatively, I wholeheartedly recommend adios for a javascript (and possibly other languages) moderator position!) :D

adios
08-08-2002, 02:11 AM
whammy..........:) ;) :thumbsup:

If I were a mod this board would be in flames...just as well I'm not...

glenngv
08-08-2002, 03:59 AM
i agree with whammy...
but this is worth mentioning though :)

<script type="text/javascript" language="javascript">

var msg = new Object();
msg['coverage'] = 'Please select a coverage.';
msg['limit'] = 'Please select a coverage limit.';

function check_selects(f) {
var el, e = 0;
while (el = f.elements[e++]) {
if (el.type == 'select-one' && el[el.selectedIndex].defaultSelected) {
alert(msg[el.name]);
el.focus();
return false;
}
}
return true;
}

</script>
</head>
<body>
<form onsubmit="return check_selects(this)">

adios
08-08-2002, 04:13 AM
Thanks glenngv, like your stuff too....

It'll still submit with no return value but, you're right, sloppy coding: return something somewhere, return something everywhere. Ugh.

Francofille
08-08-2002, 02:56 PM
Wow! You guys are great...what an awesome response. Now I need to just sift through all my beautiful packages of code you've sent me and make sure I understand the logic behind it all...

Much appreciated!

Jennifer:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum