Solved

field validation web form

Posted on 2011-09-08
16
254 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

867 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

19 Experts available now in Live!

Get 1:1 Help Now