?
Solved

field validation web form

Posted on 2011-09-08
16
Medium Priority
?
259 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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:Gurvinder Pal Singh
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
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!

 
LVL 82

Expert Comment

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

Assisted Solution

by:EMB01
EMB01 earned 200 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
 

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:Gurvinder Pal Singh
Gurvinder Pal Singh earned 200 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 800 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 800 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 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