0

非常に長い拡張可能なフォームを使用しています。たとえば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検証を使用しています。

問題は、検証を非表示または表示のステータスと組み合わせる方法がわからないことです。

4

3 に答える 3

2

このコードを試してください：

if(itemValue != "" &&  itemValue != "N")
            {
                $(".questiont").show();
                $('.questiont').toggleClass('required');
            }
            else
            {
                $(".questiont").hide();
                $('.questiont').toggleClass('required');
            }
于 2013-01-10T10:31:26.747 に答える
1

デフォルトで非表示フィールドを無視する jQuery検証プラグインを使用することをお勧めします。

jQueryセレクター「：hidden」を満たす入力要素はすべて無視されます。要素が表示されると、指定したルールに従って検証されます。

于 2013-01-10T10:30:55.383 に答える
1

2つの関連する要素が別々のコンテナ要素にネストされていると、選択と検証が簡単になります。次に、メソッドを使用して親コンテナーを選択し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');
        }
    }
);
于 2013-01-10T10:23:21.813 に答える