Как проверить элемент, если он отображается?

Question

У меня есть форма двух элементов, первый всегда требуется, а второй зависит от значения первого элемента, поэтому, если значение первого элемента равно Fashion Designers или же Fashion Illustratorsвторой элемент отображения будет блоком, а второй элемент потребуется, в то время как если значением первого элемента является что-то еще, второй элемент по-прежнему будет отображаться ни один и не требуется.

вот мой код:

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

Я получил ошибку: Uncaught TypeError: Cannot read property 'display' of undefined

Answer 1

Я думаю, что проблема в вашей переменной $field. Попробуйте использовать jQuery для проверки видимости:

!$field.is(':visible')

Попробуйте отладить эту переменную и проверьте, можете ли вы использовать нативный javascript или jQuery - лучший вариант.

С уважением.

Answer 2

Можете ли вы объяснить, что вы хотите сделать?? если вы собираетесь проверить значение поля, добавьте плагин проверки Jquery FULL NAME:
ТЕЛЕФОН:
ШТЫРЬ:
Эл. адрес:
Пароль:
Повторный пароль:

Отправить Jquery:

      <script>

        $(document).ready(function () {

            //validation rules
            $("#test").validate({

                rules: {
                  "fullname": {
                        required: true,
                        minlength: 5
                    },  
                    "phone": {
                        required: true,
                        number: true
                    },
                    "pin": {
                        required: true,
                        number: true,
                        rangelength : [3, 5]
                    },
                    "email": {
                        required: true,
                        email: true
                        },
                    "pwd": {
                        required: true,

                        },
                        "Rpwd": {
                        required: true,
                        equalTo: "#pwd"
                        }
                },
                messages: {
                    "fullname": {
                        required: "You must enter your full name",
                        minlength: "First name must be at least 5 characters long"
                    },  
                    "phone": {
                        required: "You must enter your phone number",
                        number : "Phone number must contain digits only"
                    },
                    "pin": {
                        required: "You must enter your zip code",
                        number: "Zip code must contain digits only",
                        rangelength : "Zip code must have between 3 to 5 digits"
                    },
                    "email": {
                        required: "You must enter your Email ",
                        email: "Invalid Email "

                    },
                    "pwd": {
                        required: "You must enter your Passwors",

                    },
                    "Rpwd": {
                        required: "You must enter your Re-Passwors",
                        equalTo: "Password Not Match"
                    },
                },
         submitHandler: function(e) {
        $.ajax({
             url: 'test.php',
            type: 'post',
         data: $('#example2').serialize(),
         success: function(response)
         {
            $('#view').html(response);
        }            
    });

}
            });

        });
    </script>