javascript - 如何验证元素是否显示？

Question

我有两个元素的形式，第一个元素始终是必需的，而第二个元素取决于第一个元素的值，因此如果第一个元素的值等于 Fashion Designers 或 Fashion Illustrators，第二个元素显示将是 block 的，并且第二个元素将是必需的，而如果第一个元素的值是其他值，第二个元素仍然将不显示且不是必需的。

这是我的代码:

<form action="" method="post" id='career' enctype="multipart/form-data">    

        <div class="col-xs-12 col-lg-3 paddingleft">

            <div style="margin-bottom:20px" class="form-group"> 
                <select  id="vacancy" name="vacancy" class="form-control">
                    <option value="" disabled selected>Select career</option>
                    <option value="Fashion Designers">Fashion Designers</option>
                    <option value="Fashion Illustrators">Fashion Illustrators</option>
                    <option value="Tailor">Tailors</option>
                    <option value="Tailor's Assistant">Tailor's Assistants</option>
                    <option value="Human Resources">Human Resources</option>
                    <option value="Marketing coordinators">Marketing Coordinators</option>
                    <option value="Sales coordinators">Sales Coordinators</option>
                    <option value="Accountants">Accountants</option>
                    <option value="Production Managers">Production Managers</option>
                </select>
            </div>
            <div style="margin-bottom:20px" class="form-group">
                <input type="file" name="portfolio" id="portfolio">
            </div>
            <div style="margin-bottom:20px" class="form-group">
                <input type="submit" class="btn btn-default pull-right" data-toggle="modal" data-target=".bs-example-modal-sm" value="Submit">
            </div>
        </div>
    </form>

<script type="text/javascript">

$('#career')
    .bootstrapValidator({
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        vacancy: {
            validators: {
                notEmpty: {
                    message: 'Vacancy is required.'
                },
            }
        },
        portfolio: {
            validators: {
                notEmpty: {
                    message: 'Portfolio is required.'
                },
                callback: {
                    message: 'Portfolio is required.',
                    callback: function (value, $field) {
                        if ($field.style.display === 'none') {
                            return true;
                        } else if (value != null) {

                            return true;
                        }
                    }
                }
            }
        },
    }
});
</script>

我收到错误:未捕获类型错误:无法读取未定义的属性“display”

Answer 1

我认为问题出在你的 $field 变量上。尝试使用 jQuery 来验证可见性:

!$field.is(':visible')

尝试调试此变量并检查是否可以使用 native javascript 或 jQuery 是最佳选择。

问候。