Re: newbie needs help with form validation

jadams@xxxxxxxxxxx said on 06/04/2006 5:38 AM AEST:
Hi

I have a form with a number of radio buttons on it eg.

<input type="radio" name="a1" value="1">
<input type="radio" name="a1" value="2">
<input type="radio" name="a1" value="3">
<input type="radio" name="a1" value="4">
<input type="radio" name="a1" value="5">
<input type="radio" name="a2" value="1">
<input type="radio" name="a2" value="2">
<input type="radio" name="a2" value="3">
<input type="radio" name="a2" value="4">
<input type="radio" name="a2" value="5">

When using radio buttons, it is suggested that one be checked by default. Once one is checked, it is impossible to return to the 'none checked' state without either resetting the form (say using a reset button or reloading the page) or using script.


when i submit the form the following function is performed, but it does
not work
all i want to check is that one(any) of the options is selected from
group a1 and one(any) of the options is selected from group a2 (on my
real form there are 40 groups !

Remember that if scripting is not available on the client, your check will not happen.


required operation
loop through all groups a1 to a40
check to see if any of the 5 options for each group has been
selected
if yes - all is ok
remember which group has missed
end loop
inform user of all missed groups

1. I think that i am adding the counter "C" to the name of the radio
button wrong?
2. how do i add the "or" to check if a1 or a2 or a3 or a4 or a5 missing
then inform user?

this is my sample code

<!--Form Validation-->
<script type="text/javascript">
<!-- Begin

Don't use HTML comment delimiters inside script elements. They are useless and may cause problems.


function checkFields() {
missinganswer = "";

Only create global variables when absolutely necessary, keep them local with 'var':

var missinganswer = "";



for (c = 0; c < 40; c++) {

Here you create a global variable 'c' an initialise it with a a value of zero - it is a primitive number. Again, you should keep such variables local with var:

for (var c = 0; c < 40; c++) {


for (i = 0; i < 5; i++) {

Same with 'i'.

if (document.feedbackadd.a & c[i].checked==false) {

There is no form element named 'a', evaluating document.feedbackadd.a should result in 'undefined' which is equivalent to false.

You do not want to do a bit-wise AND (&), you want to do a logical AND (&&). Lastly, c is a number and so is i, c does not have any enumerable properties so attempting to evaluate say 0[0] also returns 'undefined'.

But because document.feedbackadd.a returned undefined, it is not evaluated anyway.

The following script expects the button sets to be named contiguously from a1 to whatever (go as high as you like, just keep them contiguous), there can be any number of buttons in a set.

The script runs onsubmit, it gets a reference to the form using 'this'. You could make it more generic by passing the name prefix (in this case 'a') to the function too.


<script type="text/javascript">

function checkButtons(form)
{
// Setup variables
var oneChecked = false;
var btn, btns;

// For each button set
for (var i=1; (btns = form.elements['a' + i]); i++){

// For each button until a checked one found
for (var j=0, len=btns.length; j<len && !oneChecked; j++){
oneChecked = btns[j].checked;
}

// Deal with not finding a checked one
if (!oneChecked) {
alert('Please fix a' + i);
return false;
}

// Reset flag for next loop
oneChecked = false;
}
return true;
}
</script>

<form name="feebackadd" action=""
onsubmit="return checkButtons(this);">
<input type="radio" name="a1" value="1">a1-1<br>
<input type="radio" name="a1" value="2">a1-2<br>
<input type="radio" name="a1" value="3">a1-3<br>
<input type="radio" name="a1" value="4">a1-4<br>
<input type="radio" name="a1" value="5">a1-5<br>
<input type="radio" name="a2" value="1">a2-1<br>
<input type="radio" name="a2" value="2">a2-2<br>
<input type="radio" name="a2" value="3">a2-3<br>
<input type="radio" name="a2" value="4">a2-4<br>
<input type="radio" name="a2" value="5">a2-5<br>
<input type="reset"><input type="submit">
</form>



--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
.