Question

My application has a dynamic form that uses jQuery to toggle the display of follow up questions, and make certain questions required using the jQuery Validation plugin. My problem is that when the form loads, with previously answered questions, the correct classes are not displaying.

The “follow up” questions display a textarea if ‘yes’ is answered. If ‘yes’ is selected, and the textarea is displayed, the textarea should be a required field (class=”required”). If ‘no’ is selected, and the textarea is hidden, the textarea should not be required.

If you look at a working example, http://jsfiddle.net/GKATm/, and review the source code or use Firebug, the hidden textarea is set as required:

<span class="details" style="display: none;">
     <textarea id="followup_1_details" maxlength="1000" class="required"></textarea>
</span>

Any ideas on what I am doing wrong. Everything works when the form loads blank. But my application allows users to return to their saved answers, and when they do this the Validation plugin is flagging this as invalid, because a required field has not been answered.

Please help!

HTML:

<div>    
    <label>Question #1</label>
    <span class="options">
        No  <input type="radio" class="toggle_group required" value="0" id="restrictions_no" name="restrictions">
        Yes <input type="radio" class="toggle_group required" value="1" id="restrictions_yes" name="restrictions" checked="checked">
    </span>
</div>

<div class="details_group">
    <div>
        <label>Follow Up #1</label>
        <span>
            No  <input type="radio" class="toggle" value="0" id="followup_1_no" name="followup_1" checked="checked">
            Yes <input type="radio" class="toggle" value="1" id="followup_1_yes" name="followup_1">
        </span>            
        <span class="details">
            <textarea maxlength="1000" id="followup_1_details"></textarea>
        </span>
    </div>

    <div>
        <label>Follow Up #2</label>
        <span>
            No  <input type="radio" class="toggle" value="0" id="followup_2_no" name="followup_2">
            Yes <input type="radio" class="toggle" value="1" id="followup_2_yes" name="followup_2" checked="checked">
        </span>            
        <span class="details">
            <textarea maxlength="1000" id="followup_2_details"></textarea>
        </span>
    </div>
</div>

Javascript:

$('.toggle').on('change', function() {

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })

    $(this).parent().next('.details').toggle(showOrHide);
    $(this).parent().next('.details').find('textarea').addClass('required');

    if (showOrHide == false) {
        $(this).parent().next('.details').find('textarea').val('');
        $(this).parent().next('.details').find('textarea').removeClass('required');
    }

}).change()


$('.toggle_group').on('change', function() {

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })

    $(this).parent().parent().next('.details_group').toggle(showOrHide)
    $(this).parent().parent().next('.details_group').find('input:radio').addClass('required');
    $(this).parent().parent().next('.details_group').find('textarea').addClass('required');

    if (showOrHide == false) {
        $(this).parent().parent().next('.details_group').find('input:radio').removeAttr('checked')
        $(this).parent().parent().next('.details_group').find('input:radio').removeClass('required');
        $(this).parent().parent().next('.details_group').find('textarea').val('');
        $(this).parent().parent().next('.details_group').find('textarea').removeClass('required');

    }

}).change()  

Answer 1

Just figured it out. I placed each of the toggles into functions, and called the follow-up toggle within the group toggle.

Example: http://jsfiddle.net/GKATm/1/