bootstrap-combobox (by Daniel Farrell) 和 jquery-validation-plugin

Question

有没有人让 jquery.validate 插件与 Daniel Farrel 创建的 bootstrap-combobox 一起工作？

jquery.validate 插件可以很好地与其余的引导元素一起使用，但无法使其与引导组合框一起使用。

这里是html：

<div class="row">
                <div class="col-sm-4">
                    <label for="categoryParent" class="control-label">Category</label>
                </div>
                <div class="col-sm-8">
                    <select id="categoryParent" name="categoryParent" class="combobox form-control">
                        <option value="" selected="selected">Select the category</option>
<option>...</option>

                    </select>
                </div>
            </div>

和js：

$.validator.setDefaults({
        highlight: function(element) {
            $(element).closest('.row').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.row').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            error.insertAfter(element);
        }
    });

    $("#addProductForm").validate({
        rules: {
            categoryParent: {required: true}
        },
        messages: {                
            categoryParent : "Category required"

        },
        invalidHandler: function() {
            $("#cc-alert").css("display","block");
        },
        submitHandler: function() {

    //
    // more code
    //


            return false;
        }

Answer 1

Bootstrap ComboBox 隐藏了原来的select，并用更吸引人的东西取而代之。但是，jQuery Validate 插件只能验证原始的select 元素，但也会因为它被隐藏而忽略它。

您只需使用the ignore option 将其告知validate hidden elements。

ignore: []  // ignore nothing, validate everything

在您的代码中：

$("#addProductForm").validate({
    ignore: [],
    rules: { ....

或者：

$.validator.setDefaults({
    ignore: [],
    highlight: function(element) { ....