Here's some code that will, hopefully, help. Note that I've only completed the first series of checkbox/text fields - you can add other categories as you need.
I've added a feature that will clear/disable the text fields if the appropriate checkbox is de-selected. This is also accomplished at start-up, via the "setupPage()" function.
Finally, you may need to put some string validation code to ensure the correct text format (such as your "date" field(s) following the mandatory requirement text in the "submitForm()" function.
<html>
<head>
<SCRIPT Language = "JavaScript">
function setupPage() {
document.forms[0].checkCat1.checked = false;
document.forms[0].text1Cat1.value = "";
document.forms[0].text2Cat1.value = "";
document.forms[0].text1Cat1.disabled;
document.forms[0].text2Cat1.disabled;
}
function controlCat1(vCheck) {
if (!vCheck.checked) {
document.forms[0].text1Cat1.value = "";
document.forms[0].text2Cat1.value = "";
document.forms[0].text1Cat1.disabled = true;
document.forms[0].text2Cat1.disabled = true;
}
else {
document.forms[0].text1Cat1.disabled = false;
document.forms[0].text2Cat1.disabled = false;
}
}
function submitForm() {
if (document.forms[0].checkCat1.checked) {
if ((!document.forms[0].text1Cat1.value == "") &&
(!document.forms[0].text2Cat1.value == "")) {
alert("Submit after any value validation requirements: " +
document.forms[0].text1Cat1.value + " " +
document.forms[0].text2Cat1.value);
}
else {
alert("Fail: + Both \"Category\" fields must have values.");
}
}
else {
alert("Submit: No Category was selected.");
}
}
</SCRIPT>
</head>
<body onLoad="setupPage()">
<center>
<b>Checkbox validation</b>
</center>
<form>
<input type="checkbox" name="checkCat1" value="Y" onClick="controlCat1(this)"><b>Category 1</b>
<br>
Text A: <input type="text" name="text1Cat1" length="25" disabled>
Text B: <input type="text" name="text2Cat1" length="25" disabled>
<p>
<center>
<input type="button" name="submit" value="Submit" onClick="submitForm()">
</center>
</form>
</body>
</html>