0

I have an HTML form and I'm using the JQuery Validate plugin to require some form fields to be mandatory. I have a radio button field with 3 options:

Hours Days Unsure

and another field to enter a number that corresponds to the hours or days selections. If the user selects "Unsure" they are not required to enter a number. I"m currently validating based on if the user selects "Unsure" but I would like to change this to validate if the user has selected either "Hours" Or "Days" and only show the required label if they select either of those 2 options.

Here's my HTML at the moment:

<form role="form" action="#" method="post" id="durationForm">

 <tr>
 <td colspan = "3">Please enter the duration?</td>
 </tr>
 <tr>
    <td width="10%"><input type="number" class="form-control" id="duration"  name="duration" required="true" /></td>
 <label for="durationNumber" class="validateError"></label>
 <td width="50%">
 <div class="controls">
 <label class="radio">
    <input type="radio" name="radioduration" class="jradiodurationHours" value="Hours" required="true" /> Hours</label>
     <label class="radio">
    <input type="radio" name="radioduration" class="jradiodurationDays" value="Days" required="true" /> Days</label>
 <label class="radio">
    <input type="radio" name="radioduration" class="jradiodurationUnsure" value="Unsure" required="true" /> Unsure</label>
 <label for="radioduration" class="validateError"></label>
 </div>
 </td>
 </tr>

 <button type="submit" class="btn btn-primary">Next</button>

 </form>

Here's my script:

$(document).ready(function () {
 // initialize the plugin
 $("#durationForm").validate({ 
     errorClass: "validateError",
     rules: {
         duration: {
             required: '.jradiodurationHours:checked',
             required: '.jradiodurationDays:checked'
         }
     }
     });
 });

The problem at the moment is that it's only validating if the user selects "Days" and not "Hours". As "Days" comes last in the list of rules I'm presuming I have a syntax error in my script and it's not validating based on either "Hours" or "Days" being selected, only "Days" in this case.

I'm not sure of the correct syntax in this case to make it validate for either "Hours" or "Days" but not "Unsure".

user982124
  • 4,416
  • 16
  • 65
  • 140
  • You've already asked the same question and accepted an answer: http://stackoverflow.com/questions/24015000/html-form-validation-conditional-based-on-radio-button-selection – Sparky Jun 03 '14 at 14:36
  • It's a follow up to my previous question. I now have a related issue of the error label not disappearing so I'm trying to check for which radio buttons are selected not which one isn't. – user982124 Jun 03 '14 at 14:41
  • The question about your error label is still open. Your three questions really could have been condensed into one. BTW- you cannot declare the same `key` more than once when listing `key:value` pairs. – Sparky Jun 03 '14 at 14:45

0 Answers0