jquery依赖表单元素验证

Question

我正在使用一个很长的可扩展表单。例如，如果question 1 的回答是“是”，则会显示question 1.1，以此类推。

这适用于以下（简单）jquery 脚本：

选择菜单

<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>

问题是，如果 1 是“是”并因此显示 1.1，则应填写 1.1。我正在为此使用 jQuery 验证。

问题是我不知道如何将验证与隐藏或显示状态结合起来。

Answer 1

试试这个代码：

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

Answer 2

我建议使用jQuery validate plugin，默认情况下会忽略隐藏字段。

任何满足 jQuery 选择器 ":hidden" 的输入元素都将被忽略，一旦元素显示，它将根据您为其指定的规则进行验证。

Answer 3

当两个相关元素嵌套在单独的容器元素中时，选择和验证更容易。然后您可以使用closest() 方法选择父容器并根据您的逻辑进行验证。

例如：

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');
        }
    }
);