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字段本身的最小长度。但是，如果我选择列出的值之一，则该字段将不是必填字段。

也尝试过：

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

                    }

不起作用。

Answer 1

您的第二个示例对我来说工作得很好，因此您在其他地方还必须遇到一些未向我们展示的问题。

$(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/

Answer 2

这是我选择的代码：

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插件的事实吗？有什么想法吗？

当下拉列表为特定值时，jQuery要求文本字段

2 个答案: