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>

如果显示元素如何验证？

2 个答案: