Solved

field validation web form

Posted on 2011-09-08
16
253 Views
Last Modified: 2012-05-12
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
Comment
Question by:HelpNearMe
  • 4
  • 4
  • 2
  • +3
16 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36502550
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36502556
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36502565
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36502567
<form onsubmit="return validate();">
0
 
LVL 14

Assisted Solution

by:EMB01
EMB01 earned 50 total points
ID: 36502570
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
 
LVL 14

Expert Comment

by:EMB01
ID: 36502573
Please let me know if you have any questions.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36502575
0
 

Author Comment

by:HelpNearMe
ID: 36502734
wow.... thanks for the info buys.  Checking it out now..
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:HelpNearMe
ID: 36503254
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
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 50 total points
ID: 36503286
you can simply check with jquery

if ( $("input[name='answer1']:checked").length == 0 )
{
  //none of them are selected
}
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 200 total points
ID: 36503306
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 36505827
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
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 200 total points
ID: 36508049
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
 

Author Closing Comment

by:HelpNearMe
ID: 36509229
thanks for the help!

HNM
0
 

Author Comment

by:HelpNearMe
ID: 36509243
Zvonko:  I forgot to give you some points for assisting.. sorry.  Not sure how to correct that, but thank you for the help.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36509309
Not a problem at all.
I will get my chance <|;-)
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now