jQuery or JavaScript Validation required if yes radio button is chosen w/ exceptions

Question

I have two radio buttons Yes/No that are required. If yes is chosen then other questions drop down (all of them are required except for two: cmiddlename & mailing address 2)

I am having a very hard time on making them required when the first radio button Yes is chosen and then making those questions not required when No is chosen.

If anyone is able to help me figure this problem out I would be greatly appreciated!

 function showhideForm(Mailto_1) { if (Mailto_1 == "Yes") { document.getElementById("div1").style.display = 'block'; document.getElementById("div2").style.display = 'none'; } else if (Mailto_1 == "No") { document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; $("#div1 > .clearfix input:text").val(""); } } 

 <div class="clearfix"> <label for="Mailto_1">Mail to address other than mailing address(es) listed above?</label> <input type="radio" value="Yes" name="Mailto_1" id="Mailto_1" required="yes" onchange="showhideForm(this.value);"/><label for="Mailto_1">Yes</label> <input type="radio" value="No" name="Mailto_1" id="noMailto_1" onchange="showhideForm(this.value);"/><label for="noMailto_1">No</label> </div> <!-- If Yes is selected Dropdown information appears (if none clear text from textboxes) --> <div id="div1" class="labelIndent" style="display:none"> <div class="clearfix"> <label for="cfirstname_1">Customer's Name As It Appears on Driver License:</label> <div class="clearfix"> <input type="text" name="cfirstname_1" id="cfirstname_1" placeholder="First" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter customer's first name." value=""> <input type="text" name="cmiddlename_1" id="cmiddlename_1" placeholder="Middle" required="no" value=""> <input type="text" name="clastname_1" id="clastname_1" placeholder="Last" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter customer's last name." value=""> </div> </div> <div class="clearfix"> <label for="cbirthmonth_1">Month:</label> <label for="cbirthday_1">Day:</label> <label for="cbirthyear_1">Year:</label> <!-- <cfinclude template="../../../ddl/cbirthmonth.cfm"> <cfinclude template="../../../ddl/cbirthday.cfm"> <cfinclude template="../../../ddl/cbirthyear.cfm"> --> </div> <div class="clearfix"> <label for="cgender_1">Sex:</label> <select name="cgender_1"> <option value=" "> EMPTY </option> <option value="Male">Male</option> <option value="Female">Female</option> </select> <label for="cdriverlicense_1">DL#:</label> <input type="text" name="cdriverlicense_1" id="cdriverlicense_1" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter customer's drivers license number." value="" mask="A999-999-99-999-9"> </div> <div class="clearfix"> <label for="cstreet_1">Mailing Address 1:</label> <input type="text" name="cstreet_1" validateat="onSubmit" validate="maxlength" required="yes" id="cautocomplete1" size="54" maxlength="120" message="Please enter customer's mailing address." onFocus="cgeolocate()" value=""> </div> <div class="clearfix"> <label for="cm2street_1">Mailing Address 2:</label> <input type="text" name="cm2street_1" validateat="onSubmit" required="no" validate="maxlength" id="croute1" size="54" maxlength="120" value=""> </div> <div class="clearfix"> <label for="ccity_1">City:</label> <input type="text" name="ccity_1" validateat="onSubmit" validate="maxlength" required="yes" id="clocality1" size="30" maxlength="50" message="Please enter customer's mailing city." value=""> <div class="clearfix"> <label for="cstate_1">State:</label> <input type="text" name="cstate_1" id="cadministrative_area_level_1" size="8" maxlength="12"> </div> <div class="clearfix"> <label for="cpostal_1">Zip Code:</label> <input type="text" name="cpostal_1" required="yes" id="cpostal_code1" size="8" maxlength="12" message="Please enter customer's mailing zip code." value=""> </div> <div class="clearfix"> <label for="cemail_1">Email:</label> <input type="cemail_1" name="cemail_1" validateat="onSubmit" validate="email" required="yes" id="email" size="62" maxlength="80" message="Please enter customer's valid email address." value=""> </div> </div> <div id="div2" style="display:none"> <!-- You are not qualified to see this form. --> </div> 

Answer 1

Remove all required fields from your hidden form and change your Javascript to this:

 function showhideForm(Mailto_1) { if (Mailto_1 == "Yes") { document.getElementById("div1").style.display = 'block'; document.getElementById("div2").style.display = 'none'; $('#div1 input').not('#cmiddlename_1').not('#cm2street_1').each(function() { $(this).attr('required', 'required'); }); } else if (Mailto_1 == "No") { document.getElementById("div2").style.display = 'block'; document.getElementById("div1").style.display = 'none'; $('#div1 input').each(function() { $(this).removeAttr('required'); }); $("#div1 > .clearfix input:text").val(""); } } 

Edit

Updated snippet to exclude the two fields specified in the question. Fiddle