...

View Full Version : Validate checkbox?



angst
10-20-2005, 06:52 PM
hi,
I'm wondering how I can validate just one checkbox to make sure it's been checked before submitting the form? could someone please show me an example or point me in the right direction.

thanks in advance for your time!
-Ken

Philip M
10-20-2005, 07:18 PM
If you want only one checked it is simpler to use radio buttons.

Here is a script by Vic Phillips:-



<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f4 (15-04-2005)
// Check One Checkbox
// by Vic Phillips http://www.vicsJavaScripts.org.uk

// Check that One Checkbox button from each group is checked
// For as many groups as required

// Application Note

// CheckBoxes must be within span tags with a title attribute
// All checkboxes with a parent span with the same title are consided a group.
// There may be any number of checkboxes within the span.
// There may be as many groups as required.
// There may be other elements within the span

// The span title will be removed during initialisation

// Each group is initialised with a <body> onload event
// <body onload="f4_InitCheckOne('*GroupTitle*','Group 2','Group 3');">
// where
// *GroupTitle* = the title of the parent span of the checkbox, used the Checkbox group name (string)

// An event call f4_CheckOne()
// will activate an alert if one from each group has not been checked
// The alert will display the group name

// Eample HTML Code
// Checkbox Group 2<br>
// <span title="Checkbox Group 2">
// <input type="checkbox" name="CheckboxGroup2">
// <input type="checkbox" name="CheckboxGroup2">
// </span>

// All variable, function etc. names are prefixed with 'f4_' to minimise conflicts with other javascripts

// Functional Code

// NO NEED to Change

var f4_All,f4_IPs,f4_NotCkd,f4_Alert;
var f4_GrpAry=new Array();

function f4_InitCheckOne(){
f4_GrpAry=new Array();
for (f4_0=0;f4_0<f4_InitCheckOne.arguments.length;f4_0++){
f4_GrpAry[f4_GrpAry.length]=new Array();
f4_GrpAry[f4_GrpAry.length-1][0]=f4_InitCheckOne.arguments[f4_0];
}
f4_All=document.getElementsByTagName('SPAN');
for (f4_1=0;f4_1<f4_All.length;f4_1++){
for (f4_2=0;f4_2<f4_GrpAry.length;f4_2++){
if (f4_All[f4_1].title==f4_GrpAry[f4_2][0]){
f4_All[f4_1].removeAttribute('title');
f4_IPs=f4_All[f4_1].getElementsByTagName('INPUT');
for (f4_3=0;f4_3<f4_IPs.length;f4_3++){
if (f4_IPs[f4_3].type=='checkbox'){
f4_GrpAry[f4_2][f4_GrpAry[f4_2].length]=f4_IPs[f4_3];
}
}
}
}
}
}

function f4_CheckOne(){
f4_Alert='';
for (f4_3=0;f4_3<f4_GrpAry.length;f4_3++){
f4_NotCkd=true;
for (f4_4=1;f4_4<f4_GrpAry[f4_3].length;f4_4++){
if (f4_GrpAry[f4_3][f4_4].checked){
f4_NotCkd=false;
}
}
if (f4_NotCkd){
f4_Alert+=', '+f4_GrpAry[f4_3][0];
}
}
if (f4_Alert!=''){
alert('Pease Select One from:\n'+f4_Alert);
return false;
}
return true;
}


//-->
</script>

angst
10-20-2005, 07:21 PM
hmm, that seems like alot to just validate one checkbox,

Philip M
10-20-2005, 07:27 PM
Well, you could have done what I have done and used the SEARCH facility.

I have come up with:-

http://forums.devshed.com/archive/t-172150/Checkbox-Validation

which ought to meet you need.

angst
10-20-2005, 07:28 PM
ok, i found this:


<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (theForm.CHECKBOX_1.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
} else {
return true;
}
}
//-->
</script>


<form action="../" onsubmit="return checkCheckBoxes(this);">
<p><input type="CHECKBOX" name="CHECKBOX_1" value="This..."> This...</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>


much better;-)

-Ken

angst
10-21-2005, 06:50 PM
one more question,

is there a way to alter this code to work on type='radio' buttons?


thanks again for your time!

-Ken

Lerura
10-21-2005, 07:06 PM
<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (theForm.RADIO_1[0].checked == false)
{
alert ('You must choose "Yes" yo continue');
return false;
} else {
return true;
}
}
//-->
</script>


<form action="../" onsubmit="return checkCheckBoxes(this);">
<p><input type="RADIO" name="RADIO_1" value="This...">YES</p>
<p><input type="RADIO" name="RADIO_1" value="This..." Checked>NO</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>

angst
10-21-2005, 07:27 PM
hmm, ok,
but the form I have has no radio's selected,
and I want to make them pick one, how can I modify this to work like this?

sorry, i know very little about javascript code..

thanks again,
-Ken

angst
10-21-2005, 07:55 PM
ok,
I see how to make them select a box:

<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (theForm.RADIO_1[0].checked == false && theForm.RADIO_1[1].checked == false)
{
alert ('You must choose an option to continue');
return false;
} else {
return true;
}
}
//-->
</script>


only problem is that, the number of radio buttons will change dynamicly as they are generated from the php/mysql.

any ideas?

thanks again for your time!
-Ken

Pyth007
10-21-2005, 08:06 PM
for (i=0;i<document.forms[0].radios.length;i++)
{
if (document.forms[0].radios[i].checked)
{
user_input = document.forms[0].radios[i].value;
}
}
alert(user_input)

Check here (http://www.quirksmode.org/js/forms.html) for a good discussion on using different form elements.

angst
10-21-2005, 08:48 PM
ok,
But like i said, i don't know very much javascript,
so I'm not sure how to use that code in my script.

thanks again for your time!
-Ken

Lerura
10-21-2005, 08:56 PM
if you look at the two radiobuttons you will see that i have added "Checked" to the last of them. This ensures that this radiobutton is selected when the page is loaded

Radiobutton is for choosing one of the options.
If you click on a radiobutton then all other buttons with the same name will get unchecked

If you try to paste my code to a page you will see that "NO" is selected when the page has loaded
if you then click on "YES" you will see that the dot moves from "NO" to "YES"
and when the dot is there then theForm.RADIO_1[0].checked will be "true" but when the dot is at "NO" then theForm.RADIO_1[0].checked will be "false"

urgido
07-30-2006, 01:32 AM
I have four radibuttons and I want do the following thing: " If one of the four radiobuttons was selected this it is true otherwise returns a 'alert'

names fo my radiobuttons: visa, mastercard, ae, discover

Philip M
07-30-2006, 08:42 AM
I have four radibuttons and I want do the following thing: " If one of the four radiobuttons was selected this it is true otherwise returns a 'alert'

names fo my radiobuttons: visa, mastercard, ae, discover


The answer is right here at

http://www.codingforums.com/showthread.php?t=92284



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum