• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

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
0
HelpNearMe
Asked:
HelpNearMe
  • 4
  • 4
  • 2
  • +3
4 Solutions
 
leakim971PluritechnicianCommented:
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

0
 
Gurvinder Pal SinghCommented:
0
 
sonawanekiranCommented:
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');  

 }
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
<form onsubmit="return validate();">
0
 
EMB01Commented:
You can do this two ways, with javascript or php.  I would recommend using both ways, in case javascript is disabled.  To do this with javascript, you can try this:

http://www.w3schools.com/js/js_form_validation.asp

You may wish to use jquery, a javascript framework.  If so, try this:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

For PHP, add this to the page to which your form page gets submitted (this will be the page that is referenced in <form action="thispage.php">):

<?php

if (!isset($_POST['my_checkbox'])) {

  echo "You must check the box!";

}

Open in new window

0
 
EMB01Commented:
Please let me know if you have any questions.
0
 
leakim971PluritechnicianCommented:
0
 
HelpNearMeAuthor Commented:
wow.... thanks for the info buys.  Checking it out now..
0
 
HelpNearMeAuthor Commented:
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

0
 
Gurvinder Pal SinghCommented:
you can simply check with jquery

if ( $("input[name='answer1']:checked").length == 0 )
{
  //none of them are selected
}
0
 
leakim971PluritechnicianCommented:
jQuery : http://jsfiddle.net/6WFBP/1/
$("form").submit(function(e) {
    if( $(".checkboxes:checked").length == 0 ) 
    {
       e.preventDefault();
       alert("check one!") 
    }
})

Open in new window

HTML revised :
<form>
    <input type="checkbox" class="checkboxes" /><br />
    <input type="checkbox" class="checkboxes" /><br />
    <input type="checkbox" class="checkboxes" /><br />
    <input type="checkbox" class="checkboxes" /><br />
    <input type="checkbox" class="checkboxes" /><br />
    <input type="checkbox" class="checkboxes" /><br />
    <input type="submit" name="Submit" value="SUBMIT" /> 
</form>    

Open in new window


0
 
ZvonkoSystems architectCommented:
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

0
 
sonawanekiranCommented:
Very simple and easy
if ($('input:checkbox').is(':checked'))
 alert('Atleast 1 checkbox checked');
else alert('None checked');

Look at the complete example below


<!DOCTYPE html>
<html>
<head>
<title>Kiran Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function validate_form()
{
    if ($('input:checkbox').is(':checked')) {
      alert("checked");
      return true;
    }
    else {
      alert("Not checked");
      return false;
    }
}
</script>
</head>
<body>
 <form onSubmit="return validate_form()"> 
 <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" name="submit" value ="Submit">
</form>
</body>
</html>

Open in new window

0
 
HelpNearMeAuthor Commented:
thanks for the help!

HNM
0
 
HelpNearMeAuthor Commented:
Zvonko:  I forgot to give you some points for assisting.. sorry.  Not sure how to correct that, but thank you for the help.
0
 
ZvonkoSystems architectCommented:
Not a problem at all.
I will get my chance <|;-)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 4
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now