Member Avatar for dougancil

I am trying to write a page that requires a Pass/Fail for conditions that are done everyday and then posting them to a database. The problem I'm having is the validation of the checkboxes. Find the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#form1 {
	text-align: left;
	width: 550px;
	margin-left: 0px;
}
</style>
</head>
<script language="javascript">
function validate()
{
var chks = document.getElementsByName('dailycheck');
var checkCount = 0;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
checkCount++;
}
}
if (checkCount < 8)
{
alert("Please select Pass or Fail for each.");
return false;
}
return true;
}
</script>
<body style="margin-left: 350px; margin-top: 60px">

<form name="form1" onSubmit="return validate()">
	<table style="width: 81%; text-align: left">
		<tr>
			<td style="width: 285px">Called 512-483-9014</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px"/>Fail		
			</td>
		</tr>
		<tr>
			<td style="width: 285px">Called 512-381-0115</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px" />Fail
			</td>
		</tr>
		<tr>
			<td style="width: 285px">Checked VLPortal for Calls since Midnight</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px" />Fail
			</td>
		</tr>
		<tr>
			<td style="width: 285px">&nbsp;</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px" />Fail
			</td>
		</tr>
	</table>
	<table style="width: 81%; text-align: left">
		<tr>
			<td style="width: 285px">&nbsp;</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px" />Fail
			</td>
		</tr>
		<tr>
			<td style="width: 285px">&nbsp;</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px" />Fail
			</td>
		</tr>
		<tr>
			<td style="width: 285px">&nbsp;</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px" />Fail
			</td>
		</tr>
		<tr>
			<td style="width: 285px">&nbsp;</td>
			<td>
			<input name="dailycheck" type="checkbox" value="pass" style="width: 23px" />Pass
			<input name="dailycheck" type="checkbox" value="fail" style="width: 23px" />Fail
			</td>
			</table>
	<p style="width: 52px; margin-left: 280px">
	<input name="Submit" type="submit" value="Formsubmit1" style="text-align: center; margin-left: 0px" /></p>
	<p>&nbsp;</p>
</form>

</body>

</html>

Multiple checkbox validation is new to me and I'm just needing some help in the correct direction to go. Can anyone assist me please?

Thank you

  • 2 Contributors
  • 1 Reply
  • 107 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Ptero

Dani AI

Generated

— the core problem is the UI, not the validation. Using pairs of checkboxes lets a user pick both "Pass" and "Fail" for the same line, so your current count logic can be satisfied with invalid input. is right: use radio buttons (one name per question) so the browser enforces mutual exclusivity and your validation only needs to check that each group has a selection.

Example HTML pattern for one row (repeat with unique names like q1, q2, ...):

<tr>
  <td>Called 512-483-9014</td>
  <td>
    <label><input type="radio" name="q1" value="pass"> Pass</label>
    <label><input type="radio" name="q1" value="fail"> Fail</label>
  </td>
</tr>

Client-side validation (simple approach): build a list of the expected radio group names and confirm each group has a checked radio before submit. This is safer than counting all checked inputs because it ensures one answer per question.

function validate() {
  var names = ['q1','q2','q3','q4','q5','q6','q7','q8'];
  for (var i = 0; i < names.length; i++) {
    var radios = document.getElementsByName(names[i]);
    var ok = false;
    for (var j = 0; j < radios.length; j++) {
      if (radios[j].checked) { ok = true; break; }
    }
    if (!ok) { alert('Please select Pass or Fail for each item.'); return false; }
  }
  return true;
}

Additional notes: always validate again on the server before saving to the database. In an ASP.NET app you can generate radio groups via a repeater/RadioButtonList and validate server-side in the code-behind (or use a CustomValidator). For accessibility use <fieldset>/<legend> or label elements so screen readers and keyboard users can work the form. If you must keep checkboxes, add JavaScript to make each pair mutually exclusive, but radios are the simpler, more robust solution.

Member Avatar for Ptero

Hi dougancil
Maybe radiobuttons will serve your purpose better - the code above allows checking both "pass" and "fail" for each condition.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.