CODEWITHSUNDEEP
javascriptjqueryjquery-validate
user982124
user982124

Reputation: 4610

HTML Form Validation - Hiding required labels based on conditional validation

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. This works fine - when the user selects "Unsure" the "This field is required." label disappears, however it remains for the number input field even though that is no longer required. I can't work out how to make that label disappear once the user has clicked the "Unsure" radio button to render it no longer required.

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" value="Hours" required="true" /> Hours</label>
 <label class="radio">
<input type="radio" name="radioduration" 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 the script:

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

I've got a jsfiddle showing this in action as well.

Upvotes: 0

Views: 2975

Answers (1)

Manvi
Manvi

Reputation: 775

First You have to add an "id" on the last Unsure radio button like this - 

<input type="radio" name="radioduration" id="abc" class="jradiodurationUnsure" value="Unsure" required="true" />

Now on the basis of that id you can update scripts section with following JQuery command - 

$(document).ready(function () {
    $('#abc').click(function () {
        $('#duration').hide('fast');
    enter code here}); 
});

With the above command, the number input will hide.

Upvotes: 1

Related Questions