JQuery Обязательное текстовое поле, когда выпадающее меню имеет определенное значение

Question

Я использую плагин jQuery Validate для проверки формы.У меня есть выпадающий список с около 20 вариантов.Если кто-то выбирает только некоторые из них, мне нужно, чтобы поле «Комментарии» справа внизу стало обязательным, чтобы они добавили объяснение.Я использую следующий код для правила, но он не будет работать.Мы будем благодарны за любую помощь.

    'comments': {
            required: {
            depends: function(element){
                if ($('#description').val() == 'Company Jobs' || $('#description').val() == 'Engineering Administration' || $('#description').val() == 'Customer Service') {
                    return true;
                } else {
                    return false;
                }
            }
        },
                minlength: 20

                        }

Все остальные правила проверки работают в форме, даже в самой маленькой длине для поля «Комментарии».Но если я выберу одно из перечисленных значений, поле не станет обязательным.

Пробовал и это:

    'comments': {
        required: {
        depends: function(element){
            if ($('#description option:selected').text() == 'Company Jobs') {
                return true;
            } else {
                return false;
            }
        }
    },
            minlength: 20

                    }

Не работает.

Answer 1

Вот мой код для выбора:

HTML

    <div class="form-group">
                            <label for="description">Description <span class="text-danger">*</span></label>
                            <select class="js-select2 form-control" id="description" name="description" style="width: 100%;" data-placeholder="Start typing to choose a description...">
                                <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                <?php

                                while($row = mysqli_fetch_assoc($result)) {
                                echo "<option value='" . $row['description'] . "'>" . $row['description'] . "</option>";} ?>
                                </select>
                        </div>

Правила и сообщения для проверки:

      rules: {
            'date': {
                required: true

            },
            'description': {
                required: true

            },

            'rt': {
                required: true,
                currency: ['$', false]

            },
            'ot': {
                required: true,
                currency: ['$', false]

            },

            'comments': {
        required: {
        depends: function(element){
            if ($('#description option:selected').text() == 'Company Jobs') {
                return true;
            } else {
                return false;
            }
        }
    },
            minlength: 20

                    }



        },
        messages: {
            'date': 'Please enter a valid date.',
            'description': 'Please choose a description.',
            'rt': 'Please enter a valid period of time.',
            'ot': 'Please enter a valid period of time.',
            'comments': {
                required: 'Please enter some comments.',
                minlength: 'You must have more to say than that! How about some more detail.'}

        }

Как я уже сказал, все проверки работают отличноза исключением поля комментариев не становится обязательным.Минутка на это даже работает.Теперь вы думаете, что это может быть тот факт, что я использую плагин jQuery select2 на поле выбора?Есть мысли?

Answer 2

Ваш второй пример отлично работает для меня, поэтому у вас должны быть проблемы в других местах, которые вы нам не показали.

$(document).ready(function() {

    $('#demo').validate({
        rules: {
            description: {
                required: true
            },
            comments: {
                required: {
                    depends: function(element) {
                        if ($('#description option:selected').text() == 'Company Jobs') {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            }
        },
        submitHandler: function(form) { // form demo
            alert('valid form');
            return false;
        }
    });

});

HTML-разметка:

<form id="demo">
    <select name="description" id="description">
        <option value="">please select...</option>
        <option value="CompanyJobs">Company Jobs</option>
        <option value="foo">Foo</option>
        <option value="bar">Bar</option>
    </select>
    <input type="text" name="comments" />
    <input type="submit" />
</form>

ДЕМО: https://jsfiddle.net/h7fz3cx5/

Вы также можете просто использовать одну строку здесь ...

comments: {
    required: {
        depends: function(element) {
            return ($('#description option:selected').text() == 'Company Jobs');
        }
    }
}

https://jsfiddle.net/tgd75n3k/