/    Sign up×
Community /Pin to ProfileBookmark

Checkbox Validator Issue

Copy linkTweet thisAlerts:
Sep 26.2008

Hello. I have a checkbox validation script in this document, but there is a slight problem with it. It will only validate the first checkbox in each group. If someone checked the second checkbox in a group, it would not work. Any help is appreciated.

[url]http://www.barkleigh.com/supergroom_forms/sg08_contest_reg.php[/url]

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 26.2008 — An id must be unique.

Loop through an array of names or input type checkbox

The script in the table is invalid and would do nothing anyway.
Copy linkTweet thisAlerts:
@felgallSep 27.2008 — A checkbox can only ever be checked or unchecked and is therefore always valid. It is only in combination with other things on the page that it may be in an invalid state and that is better dealt with by disabling the checkbox when it can only have one valid value.
Copy linkTweet thisAlerts:
@bp_travisauthorSep 28.2008 — It's not really a validation script, but more a if this particular checkbox is checked, make this text field required. That's all I want the script to do. I know very little Javascript so what was mentioned above may be a challenge for me. Is it basically using a for loop to loop through an array of the checkbox names? Thanks.
Copy linkTweet thisAlerts:
@FangSep 29.2008 — Is it basically using a for loop to loop through an array of the checkbox names?[/QUOTE] Yes.

http://www.yourhtmlsource.com/javascript/formvalidation.html
Copy linkTweet thisAlerts:
@bp_travisauthorSep 30.2008 — The problem I am running into is that the checkboxes do not have unique names. They are all named Package[] (this is necessary for the other scripting of the page to work correctly). Is there anyway to get javascript to see those checkboxes in an array for me to identify them. Like Package [1], Package [2], etc. Thanks
Copy linkTweet thisAlerts:
@FangSep 30.2008 — var aP=document.getElementsByName("Package[]");
for(var i=0; i<aP.length; i++) {
// do something
}
Copy linkTweet thisAlerts:
@bp_travisauthorSep 30.2008 — We're getting closer. That for loop you post would work, but I need a way to uniquely identify a group of checkboxes. Say there is a group of 3 checkboxes and if one of them was checked, make this text field required. Is there a way I could do this using a fieldset or div tag with an id? Thanks
Copy linkTweet thisAlerts:
@FangOct 01.2008 — Show the text box once one of the checkboxes is checked.
Copy linkTweet thisAlerts:
@bp_travisauthorOct 01.2008 — Would that necessarily make the now appeared checkboxes required before submission or just basically make them appear after the checkbox is checked? I am still having a hard time linking a certain group of checkboxes to a certain textbox. Since all the checkboxes have the same name, how can I narrow in on a certain checkbox?
Copy linkTweet thisAlerts:
@bp_travisauthorOct 02.2008 — I thought about putting the checkboxes in a array, but then realized that the order that they are checked in could change meaning I couldn't access a specific one. I just need a way to associated a specific set of checkboxes with a specific set of textboxes and then if one of them is checked make the textbox required. Like on this page, there are groups for the contest and each group has its required textboxes. I only want those required if a person checks one of the groups.

https://www.barkleigh.com/supergroom_forms/sg08_contest_reg.php
Copy linkTweet thisAlerts:
@FangOct 03.2008 — An id must be unique. most of the id's are unnecessary.

See if this method works for you:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>validate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function validate() {
var sections=['terrier', 'sporting', 'mixed', 'poodle'];
var error='';
for(var s=0; s<sections.length; s++) {
var group=document.getElementById(sections[s]).getElementsByTagName('input');
var check=false;
for(var i=0; i<group.length; i++) {
if(group[i].type=='checkbox' && group[i].checked) {
check=true;
}
if(group[i].type=='text' && check && group[i].value=='') {
error+=group[i].id+',';
}
}
}
if(error!='') {
alert(error);
}
}
</script>

<style type="text/css">
h4 {font-weight:bold;text-align:center;border-bottom:2px solid;padding:0 10em;}
label {display:block;margin-left:5em;}
.nomargin {margin:0;}
</style>

</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tbody id="terrier">
<tr><td>
<!-- terrier html -->
</td></tr>
</tbody>
<tbody id="sporting">
<tr><td>
<h4>Sporting</h4>
<label>50S<input type="checkbox" name="Package[]" value="50S"> sporting level 1 — $99</label>
<label>51S<input type="checkbox" name="Package[]" value="51S"> sporting level 2 — $109</label>
<label>52S<input type="checkbox" name="Package[]" value="52S"> sporting level 3 — $119</label>
<label class="nomargin">Sporting Breed: <input type='text' id='sporting_breed' size='30'></label>
<label class="nomargin">Sporting Size: <input type='text' id='sporting_size' size='30' id='sporting_size' /></label>
</td></tr>
</tbody>
<tbody id="mixed">
<tr><td>
<!-- mixed html -->
</td></tr>
</tbody>
<tbody id="poodle">
<tr><td>
<!-- poodle html -->
</td></tr>
</tbody>
</table>
<button type="button" onclick="validate()">validate</button>
</body>
</html>
×

Success!

Help @bp_travis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...