Solved

field validation web form

Posted on 2011-09-08
16
256 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Ouput in html in powershell 2 20
HTML Anchor Link Problem 3 36
custom authorization on controller action and HTML in asp.net mvc 1 28
WordPress 8 32
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

837 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