Required field after checkbox is marked

Ag3nt

New Member
I'm very new to JavScript and am I'm trying to create a form that requires information be input into a field after a checkbox is marked, by toggling a required class. I've tried for two days and am unable to make the "Start Date" a required field if the "Gymnasium" box is checked.Any help would be great.Here's what I have so far:\[code\]<!DOCTYPE html><html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#gym").change(function(){ $("#togg1").toggle(this.checked); $("#startDate").toggleClass("required"); }); }); $("#serviceForm").validate();</script></head><body><div id="courseForm" style="width: 500px; border: 1px solid #000; padding: 50px 0 50px 50px;margin: 0 auto;"> <form id="serviceForm" action="#" onSubmit="required(this);" method="POST" enctype="text/plain"> <input name="orgid" type="hidden" value="http://stackoverflow.com/questions/15709921/000001" /> <input name="retURL" type="hidden" value="http://stackoverflow.com/questions/15709921/#" /> <label for="company">* Agency Requesting Facility:</label> <br /> <input id="company" required="required" maxlength="50" name="company" size="50" type="text" /> <br /> <br /> <label for="name">* Agency Contact:</label> <br /> <input id="name" required="required" maxlength="50" name="name" size="50" type="text" /> <br /> <br /> <label for="phone">* Contact Phone Number:</label> <br /> <input id="phone" required="required" maxlength="14" name="phone" size="14" type="text" /> <br /> <br /> <br />Courses offered <br /><input id="gym" name="gym" type="checkbox" value="http://stackoverflow.com/questions/15709921/1" />Gymnasium <br /> <span id="togg1" style="display:none"> <span id="togg2" style="display:inline"> <lable for="startDate">* Start Date:</lable> <input id="startDate" maxlength="10" name="startDate" size="10" /> </span> </span> <br /> <br /> <label for="description">Comments:</label> <br /> <textarea name="description" cols="40" rows="5"></textarea> <br /> <br />* denotes required fields <br /> <input type="submit" name="submit" id="submit" value="http://stackoverflow.com/questions/15709921/SUBMIT" /></form></div></body></html>\[/code\]
 
Back
Top