View Full Version : multiple checkbox validation
vineet
October 3rd, 2008, 10:34 AM
hi all
i have one form in which i have multiple checkbox options for the user to select.
i have inserted the validation script in this form which alert the user if the user has not selected any of the checkbox options. if one checkbox is selected then the form will get submit.
now i want that user should select atleast 4 checkboxes. plz help me with what to change or add in this script.
the form and javascript validation code is below :
<html>
<head>
<script language="javascript">
function validate()
{
var chks = document.getElementsByName('colors[]');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one.");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form1" onSubmit="return validate()">
Your colors are <br>
<input type="checkbox" name="colors[]" value="blue" id="blue">Blue <br>
<input type="checkbox" name="colors[]" value="red" id="red">red <br>
<input type="checkbox" name="colors[]" value="green" id="green">green <br>
<input type="checkbox" name="colors[]" value="yellow" id="yellow">yellow <br>
<input type="checkbox" name="colors[]" value="voilet" id="voilet">voilet <br>
<input type="checkbox" name="colors[]" value="grey" id="grey">grey <br>
<br>
<input type="submit" value="submit" name="submit"/>
</form>
</body>
</html>
bootiteq
October 7th, 2008, 01:46 AM
you sure this submit string is what you want?
validation.html?colors%5B%5D=red&colors%5B%5D=green&colors%5B%5D=yellow&submit=submit
this eg's submit string looks like this
validation.html?blue=true&red=true&green=true&grey=true&submit=submit
<html>
<head>
<script language="javascript">
function validate(){
// keep a count of how many checked
var boxeschecked=0;
// cycle thru all checkbox ids - increment boxeschecked var if true
for(var i=0; i<6; i++){
document.getElementById("c"+String(i)).checked == true ? boxeschecked++: null;
}
if(boxeschecked>3){
alert("passed");
return true;
}else{
alert("failed");
return false;
}
}
</script>
</head>
<body>
<form name="form1" onsubmit="return validate()">
Your colors are <br>
<input type="checkbox" name="blue" value="true" id="c0">Blue <br>
<input name="red" type="checkbox" value="true" id="c1">red <br>
<input type="checkbox" name="green" value="true" id="c2">green <br>
<input type="checkbox" name="yellow" value="true" id="c3">yellow <br>
<input type="checkbox" name="voilet" value="true" id="c4">voilet <br>
<input type="checkbox" name="grey" value="true" id="c5">grey <br>
<br>
<input type="submit" value="submit" name="submit"/>
</form>
</body>
</html>
icio
October 10th, 2008, 09:06 AM
You don't need to specify an individual id for each checkbox. That's just more work. You can use a very similar method to the one that you have used before:
<html>
<head>
<script language="javascript">
function validate()
{
var chks = document.getElementsByName('colors[]');
var checkCount = 0;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
checkCount++;
}
}
if (checkCount < 4)
{
alert("Please select at least four.");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form1" onSubmit="return validate()">
Your colors are <br>
<input type="checkbox" name="colors[]" value="blue" id="blue">Blue <br>
<input type="checkbox" name="colors[]" value="red" id="red">red <br>
<input type="checkbox" name="colors[]" value="green" id="green">green <br>
<input type="checkbox" name="colors[]" value="yellow" id="yellow">yellow <br>
<input type="checkbox" name="colors[]" value="voilet" id="voilet">voilet <br>
<input type="checkbox" name="colors[]" value="grey" id="grey">grey <br>
<br>
<input type="submit" value="submit" name="submit"/>
</form>
</body>
</html>
To solve the problem of the ugly submit string, set the "method" parameter of the <form> element to "post":
<form method="post" action="validation.php">...</form>
bootiteq
October 12th, 2008, 06:33 AM
That is really rather lovely icio :) didn't know one could do that
<?php
echo "<pre>" . print_r($_REQUEST['colors'], true) . "</pre>";
?>
prints
Array
(
[0] => blue
[1] => green
[2] => yellow
[3] => voilet
)
icio
October 12th, 2008, 12:44 PM
Never use $_REQUEST! You should use the appropriate of $_POST, $_GET etc.
<?= "<pre>".print_r($_POST['colors'], true)."</pre>" ?>
bootiteq
October 13th, 2008, 07:17 AM
Why not?
icio
October 13th, 2008, 04:41 PM
To begin with $_REQUEST is stupid. You always know where to expect the data you want from so you can make an educated decision about whether or not it's to come from $_POST, $_GET or $_COOKIES or whatever so you shouldn't really have to use this overall data input.
Second of all you don't know where the data is coming from with $_REQUEST. This is a problem because if you have the same variable set in $_POST and $_GET then it is likely that the $_POST version will override the $_GET. $_COOKIES can also be overridden. This is completely uncertain, however, because it is server-defined.
It's bad practice.
bootiteq
October 13th, 2008, 06:47 PM
Sounds more like request smacked you down in the schoolyard.
Its very useful when developing server pages for Flash. Rather than open up someone else's file and fumble around looking for fonts you can just use request. Its faster. And for a test like the above when you are checking output of both get and post.
icio
October 14th, 2008, 01:08 PM
It's no more useful than post or get when developing server pages for flash you are just being lazy. And it's not faster -- it's a larger array so it has to be slower to access.
bootiteq
October 15th, 2008, 05:29 AM
I was expecting a security reason for not using it. I care a lot about that.
Im too busy however to care about server speed for a what is usually only a couple of vars.
icio
October 15th, 2008, 03:28 PM
Users easily being able to override your form data isn't an obvious security problem?
If you want to stick to your $_REQUEST, then that's fine with me. But I recommend you don't recommend it to other people who perhaps will not be able to make educated decisions on the matter. I think most will agree that $_POST/$_GET is better in general cases over $_REQUEST.
bootiteq
October 15th, 2008, 10:49 PM
Point taken.
I won't use request ever again!
I should consider myself lucky for it working out well out so far.
Thanks heaps for pursuing!
tfg
October 16th, 2008, 07:54 AM
I was expecting a security reason for not using it. I care a lot about that.
think about it in terms of having a contact form on your site which has it's information submitted via POST. as long as you use $_POST in your php you can relatively sure that anything submitted has come through your form. if you use $_REQUEST then anybody could create a script which sends data to your form through GET and it would still be parsed. I could guess at your variable names then write my own script to loop through 500, 000 email addresses and send the details of each through your form just by creating a url such as www.yoursite.com/yourform.php?email=someUser@address.com. your form's compromised and i've got my spam emails out.
bootiteq
October 16th, 2008, 02:05 PM
I thought you could do that with post as well? am I missing something?
For this reason I send a custom-encrypted password for security. Without it the code exits.
I used to use serviceCapture but now there is this addon to read all post vars
https://addons.mozilla.org/en-US/firefox/addon/6647
Also you guys have prompted me to check this out properly
http://www.ibm.com/developerworks/opensource/library/os-php-secure-apps/index.html
.
sabashahbaz
January 22nd, 2011, 01:50 AM
@ vineet (http://www.kirupa.com/forum/member.php?u=117017)
Thank you so much.... i have registered only to say thanks because you solve my problem by this code... again thanks:)
Powered by vBulletin® Version 4.1.10 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.