Topic awaiting preservation: validating radio buttons

Hi. I am having a real problem with this. I just can't understand this coding.
I have 5 radio buttons together which are suppose to rate my site 1 to 5.

What is the code to make sure at least one of them radio's are checked before submission?


One more question if it's not too much. On my other form I have checkboxes, there are 2 and I have them validating already, BUT. They are contact boxes one for email which is manditory already, the other is phone. How would I code so that if they checked phone they would have to fill in phone before submission? Phone isn't a manditory field, only to be if they choose phone as a contact method.

~Shay

Radio buttons have the same id/name but are separete elements. You must browse each radio button element, test the checked property of those with the id you want to validate. If the value is true for one of them, you're done.

For your second question, it's easy, you must check if the checkbox is checked first, and if it is you must test if the phone is valid.

Hope that helps,

Some more pointers on how to deal with radio buttons in JS:
http://codepunk.hardwar.org.uk/ajs19.htm

If you're still having problems with the checkboxes, best show us what you've got so far.

I feel so dmb today. This is what I have so far. Now do I put the array under this? I am still a beginner and some things are still fuzzy to me.

function process(){

var rating = "";

for (i = 0; i < 5; i++){
if (!document.form.rating[i].checked == true){
alert('Please select a rating');
event.returnValue=false;
}

~Shay

Does your code work somewhere else than in IE if at all ?
I suppose in your code the id/name of the form is "form", and the name of your radio buttons is "rating".

Here comes a rather general method.

function process()

{

	var

		validationSucceed	= false,

		noRadioButtonChecked	= true,

		formHandle		= document.forms[ 'idOfYourForm' ],

		formElementsCount	= formHandle.elements.length

	

	for( var i=0; i<formElementsCount; i++ )

	{

		var currentFormElement = formHandle.elements[ i ]



		if( currentFormElement.type=="radio" && currentFormElement.name=="idOfYourRadioButton" )

		{

			if( currentFormElement.checked )

				noRadioButtonChecked = false

		}

	}

	



	if( !noRadioButtonChecked )

		validationSucceed = true

	

	if( !validationSucceed )

		alert( "error message" )



	return validationSucceed

}

You should have a look at the Real questions for real people. threads. It contains some pointers to some usefull ressources to get started with JavaScript. Among which there is the reference of JavaScript 1.3 in PDF featuring a list of the objects ( such as the form, input, Date, Math, ... ) available.


[edit] reformatting the code to look ok with the 8 whitespaces tabs. I'm always coding with the tabs set to 4 WS. [/edit]

(Edited by poi on 03-09-2005 22:44)

Hey poi thanks for the code. I can't get it to work for some reason. I edited where I was suppose to but no error message comes up when I submit the form. Here is my JS coding with your code edited for my form.



<script type="text/javascript">
// this is for older Internet Explorers which don't understand getElementById:
if (document.all && !document.getElementById)
document.getElementById = function(id) {
return document.all[id];
}

function hideAll() {
for (formNumber=1; formNumber<=3; formNumber++)
document.getElementById("form"+formNumber).style.display = 'none';
}

function show(formNumber) {
document.getElementById("form"+formNumber).style.display = 'block';
}
function validate(form) {

if (form.FromAddress.value == '') {
alert ('Please fill in your email');
event.returnValue=false;
}

if(form.Name.value =='') {
alert ('Please give your name.');
event.returnValue=false;
}

if (form.zipcode.value =='') {
alert('Please enter your zip code.');
event.returnValue=false;
}
if(form.Country.value =='') {
alert ('Please fill in your country');
event.returnValue=false;
}

if(form.name == 'form3' && (!form3.contact.checked && !form3.contact2.checked)) {
alert('Please choose how you wish to be contacted.');
event.returnValue=false;
}

function process()
{
var
validationSucceed = false,
noRadioButtonChecked = true,
formHandle = document.forms[ 'form2' ],
formElementsCount = formHandle.elements.length

for( var i=0; i<formElementsCount; i++ )
{
var currentFormElement = formHandle.elements[ i ]

if( currentFormElement.type=="radio" &&

currentFormElement.name=="rating" )
{
if( currentFormElement.checked )
noRadioButtonChecked = false
}
}


if( !noRadioButtonChecked )
validationSucceed = true

if( !validationSucceed )
alert( "Please choose a rating" )

return validationSucceed
}
{
return true;
}
}
</script>

~Shay

you realize that you pasted my function in the middle of your function. There's no chance that my function is executed in these conditions.

Btw, when doing a form validation, the general idea wants that you have a variable with the error message, and concatenate the error messages as you find some erronous fields, and show the complete error message with an alert( ) at the end of the validation. I should have made that explicitly in my function. That way, the user won't be harrassed by a horde of alert( ). ... on the other hand, that's a good method to make sure the user will do its best to enter valid datas

ps: Could you please put your code between the [ code ] and [ /code ] UBB tags. The lack of indentation is a nightmare.

Okay well I moved the code down into it's own script section. It still doesn't work. I'm very slowwww this week because I'm sick so I guess I'm just not getting it.

Thanks for your help I really appreciate it. Maybe I should just wait for my professor to come back from sick leave.

~Shay