Again...How to validate radio....

Hey all - I have been trying to get this to work most of the day... Have looked at all of the posts regarding validation on radio buttons not working with still no luck - have tried everything. I think it may come down to the last code in the moovalidation.js file, As IE is giving me an error there. I am using Joomla 1.015 with version Chronoforms 2.39. Here is the last part of the moovalidation code that comes with 2.39 for Joomla 1.015:

['validate-one-required', 'Please select one of the above options.', function (v,elm) {
				var p = elm.parentNode;
				var options = p.getElementsByTagName('INPUT');
				return $A(options).any(function(elm) {
					return $F(elm);
				});
			}]

The most recent Joomla 1.5 chrono beta release hase 3 moovalidation.js files in it. The one called moovalidation2_.js has the following last part for radio:

	['validate-one-required', 'Please select one of the above options.', function (v,elm) {
				var p = elm.parentNode;
				var options = p.getElementsByTagName('INPUT');
				b = false;
                ($A(options)).each(function(elm) {
                    if (elm.checked==true) {
                        b = true;
                    }
                });
                return b;
            }],

So, when I try to use this file with my 2.39 version it doesn't work. Could version 2.39 for Joomla 1.015 have never been fixed with this issue? Please help - I have to use 1.015 and I need to validate some radio buttons!!! 😲

Hello,

theoretically, this is the code which should work :

['validate-one-required', 'Please select one of the above options.', function (v,elm) {
		var p = elm.parentNode;
		var options = p.getElementsByTagName('INPUT');
		for(i=0; i<options.length; i++){
			if(options[i].checked == true) {
			  return true;
			}
		}
	}]
]);

as long as you have mootools as the validation library, and followed other guidelines like having a div parent element ?

This is the code in my mooValidation.js:

['validate-one-required', 'Please select one of the above options.', function (v,elm) {
var p = elm.parentNode;
var options = p.getElementsByTagName('INPUT');
return $A(options).any(function(elm) {
return $F(elm);
});
}]
]);

It just doesn't validate.
So I treid the code from previous message... pasted it into mooValidation.js... didn't work either.
This is my testing area: http://www.amersfoort-ict.nl/index.php?option=com_chronocontact&Itemid=57
Please help, how can I get this validation going?😢

Hi lennart,

attached moovalidation file working, please replace yours and let me know!
[attachment=0]mooValidation.zip[/attachment]
Cheers

Max

theoretically, this is the code which should work :

And so it did for me at least (J1.5.6 and CF 3.0 J1.5 BETA 2)
Thanks a lot for the fix!

Jumalakarhu

Thanks for confirming it!🙂

Maybe I am doing something wrong, I have some radio buttons in a form and I just cannot get them to work. I tried the script but that doesn''t help. It seems the Validation isn't doing what I want it too.

I have added the ID name of the radiobutton to the validation line together with a gender check inside the validation box #12: validate-one-required

But whenever I try to validate the form, it tells me that I need to check the first one, when i do that, everything works, but when I select the second or third button, it keeps telling me I need to push the first... Odd.

Do I need to put the ID into the 1 - required (not blank) as well or can I keep that empty? (Besides for other fields that need to be checked of course).

Here is the Form code for just the 3 radio buttons which go inside a bigger table:

<tr>
<td width="23%"><div align="right"><input id="studiekeuze" name="studiekeuze" type="radio" value="Onderzoek 073371" /></div></td>
<td width="77%">Ik wil mijzelf opgeven voor Onderzoek 073371</td>
  </tr>
  <tr>
<td><div align="right"><input id="studiekeuze" name="studiekeuze" type="radio" value="Onderzoek 081071" /></div></td>
<td>Ik wil mijzelf opgeven voor Onderzoek 081071</td>
  </tr>
  <tr>
<td valign="top"><div align="right"><input id="studiekeuze" name="studiekeuze" type="radio" value="inschrijfformulier" /></div></td>
<td>Ik ben niet geïnteresseerd in deelname aan dit  onderzoek, maar ik wil toch graag vrijblijvend een inschrijfformulier en meer  informatie ontvangen over de andere onderzoeken van PRA International.</td>
  </tr>

Hi Bandbreed,

For 'validate one required' the radio buttons must all be inside a div. Try simplifying this code so that all three are in one div inside a td.

<tr>
<td width="23%"><div align="right"><input name="studiekeuze" type="radio" value="Onderzoek 073371" /></br>
<input name="studiekeuze" type="radio" value="Onderzoek 081071" /><br />
<input id="studiekeuze" name="studiekeuze" type="radio" value="inschrijfformulier" /></div></td>
<td width="77%">Ik wil mijzelf opgeven voor Onderzoek 073371<br />
Ik wil mijzelf opgeven voor Onderzoek 081071<br />
Ik ben niet geïnteresseerd in deelname aan dit  onderzoek, maar ik wil toch graag vrijblijvend een inschrijfformulier en meer  informatie ontvangen over de andere onderzoeken van PRA International.</td>
</tr>

I've also removed the ids from the first two inputs as these should be unique.

Bob

Thanks, I will give that a try! Now that you mentioned it I do remember something about div's and validation...

For radio buttons the determining factor should not be whether it's contained in the same parent element or not. While that's a convenience for checkboxes, a better identifier for radio buttons is available because they all have the same name, so wherever they are on the page the script ought to find them and loop through them.

This for example works:

var p = document;
var options = p.getElementsByName(elm.name);
return $A(options).any(function(elm) {
return $F(elm);
});

Perhaps there should be separate options for radio buttons and checkboxes?

Thanks for the suggestion Tom! I agree with you, I iwll try to enhance this validation script soon!

Regards

Max

Maybe:
//set as in original code
var p = elm.parentNode.parentNode;
var options = p.getElementsByTagName('INPUT');
// but override it if it's a radio group
if (elm.type == 'radio') {
p = document;
options = p.getElementsByName(elm.name);
}
return $A(options).any(function(elm) {
return $F(elm);
});

nice one!😉