asked on

field validation web form

Hi Experts,

I am modifying a form that has a few checkboxes. I want to require that one or more of the checkboxes is selected when the form is submited.

Can someone explain how this is typically done?

Thanks HNM

leakim971

set onsubmit attribute of your form :

<form onsubmit="validate();">

Open in new window

javascript :

function validate() {
       var checkboxes = document.getElementsByName("checkboxes");
       var oneIsChecked = false;
       for(var i=0;i<checkboxes.length;i++)
       {
             if( checkboxes[i].checked )
             {
                  oneIsChecked = true;
                  break;
             }
       }
       return oneIsChecked;
}

Open in new window

Gurvinder Pal Singh

like this?
http://www.netevolution.co.uk/scripts.asp?ID=25

Kiran Sonawane

you can use jquery to check if the atleast 1 checkbox checked.

function is_checkbox checked()
{
var checkbox_flag = false;
$('input:checkbox').each(function(){
if($(this).is(':checked'))
checkbox_flag = true;
});

if(checkbox_flag)
alert('Checkbox is checked');
else
alert('Checkbox is not checked');

}

leakim971

SOLUTION

EMB01

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

EMB01

Please let me know if you have any questions.

leakim971

test page : http://jsfiddle.net/mgvYa/

HelpNearMe

ASKER

wow.... thanks for the info buys. Checking it out now..

HelpNearMe

ASKER

sonawanekiran:

I'm having some trouble testing this. It seems that the original developer is doing some testing in a subsequent php page. The testing appears to use the name field of the checkbox in the $_POST array, and because of this each name field must be unique. As a result, I am confused about how to use the jquery script with the checkboxes all using unique names.

Any ideas about how to use jquery to validate that at least one is checked in this situation?

thanks
See code sample

<input name="answer1" value="ON" type="checkbox" id="answer1" />
<input name="answer2" value="ON" type="checkbox" id="answer2" />
<input name="answer3" value="ON" type="checkbox" id="answer3" />
<input name="answer4" value="ON" type="checkbox" id="answer4" />

Open in new window

SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zvonko

Here an example:

<html>
<head>
<title>Zvonko &#42;</title>
<script>
function checkForm(theForm){
  var elem = theForm.elements;
  var boxChecked=0;
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="checkbox" && elem[i].checked){
	  boxChecked++;
	}
  }
  if(boxChecked<2){
    alert("Check at least two boxes.");
	return false;
  }
  return true;
}
</script>
</head>
<body>
<form onSubmit="return checkForm(this)" >
<input name="answer1" value="ON" type="checkbox" id="answer1" /> Answer1 <br/>
<input name="answer2" value="ON" type="checkbox" id="answer2" /> Answer2 <br/>
<input name="answer3" value="ON" type="checkbox" id="answer3" /> Answer3 <br/>
<input name="answer4" value="ON" type="checkbox" id="answer4" /> Answer4 <br/>
<input type="submit">
</form>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Kiran Sonawane

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HelpNearMe

ASKER

thanks for the help!

HNM

HelpNearMe

ASKER

Zvonko: I forgot to give you some points for assisting.. sorry. Not sure how to correct that, but thank you for the help.

Zvonko

Not a problem at all.
I will get my chance <|;-)