CODEWITHSUNDEEP
jqueryformsvalidationjquery-validate
mat
mat

Reputation: 1629

jquery dependend form elements validation

I am using a very long expandable form. For example if question 1 is answered with "Yes", question 1.1 will show and so on.

This works well with the following (simple) jquery script:

Selectmenu

<script type="text/javascript">
    $(document).ready(function() {
        $(".question").change(function() {
            var itemValue = $(this).children(':selected').val();

            if(itemValue != "" &&  itemValue != "N")
            {
                $(".questiont").show();
            }
            else
            {
                $(".questiont").hide();
            }
        }); 
    }); 
</script>

HTML

<select name="question1[]" class='required txtBox'>
              <option selected="selected"></option>
              <option value="J">Yes</option>
              <option value="N">No</option>
            </select>
<table>
    <tr class="questiont" style="display:none; border-collapse:collapse;">
              <td>4.2</td>
              <td>Textarea</td>
              <td><textarea name="questiont[]" class="txtBox"></textarea></td>
            </tr>
</table>

The problem is, that if 1 is "Yes" and thus 1.1 is shown, 1.1 should be filled. I am using jQuery validate for that.

The problem is that i don't know how to combine the validation with a hidden or shown status.

Upvotes: 0

Views: 142

Answers (3)

Boaz
Boaz

Reputation: 20230

It's easier to select and validate when the two related elements are nested in a separate container element. You can then select the parent container with the closest() method and validate according to your logic.

For example:

HTML 

<div class="question_container">    
    <select name="question1[]" class='required txtBox'>
        <option selected="selected"></option>
        <option value="J">Yes</option>
        <option value="N">No</option>
    </select>
    <table>
        <tr class="questiont" style="display:none; border-collapse:collapse;">
            <td>4.2</td>
            <td>Textarea</td>
            <td><textarea name="questiont[]" class="txtBox"></textarea></td>
        </tr>
    </table>
</div>

Javascript

$('.question_container select.required').change(
    function() {
        var question_container = $(this).closest('.question_container');
        var questiont          = question_container.find('.questiont textarea');

        if ($(this).val() == 'yes' && !$.trim(questiont.val())) {
            // ... error logic goes here
            // For example:
            question_container.addClass('with_error');
        }
    }
);

Upvotes: 1

primetwig
primetwig

Reputation: 465

Try this code:

if(itemValue != "" &&  itemValue != "N")
            {
                $(".questiont").show();
                $('.questiont').toggleClass('required');
            }
            else
            {
                $(".questiont").hide();
                $('.questiont').toggleClass('required');
            }

Upvotes: 2

politus
politus

Reputation: 6086

I suggest using the jQuery validate plugin which will ignore hidden fields by default.

Any input element that satisfies jQuery selector ":hidden" will be ignored, once the element is shown then it will be validated according to the rules you have specified for it.

Upvotes: 1

Related Questions