如果元素被显示，如何验证它

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验证插件全名：
电话：
引脚：
电子邮件：
密码：
重新密码：

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