bootstrap-combobox（丹尼尔·法雷尔）和 jquery-validation-plugin

Question

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

jquery.validate 插件与剩余的 bootstrap 元素配合得很好，但无法与 bootstrap-combobox 配合使用。

这是 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 验证插件只能验证原始的 select 元素，但也会忽略它，因为它是隐藏的。

您只需使用 the ignore option to tell it to validate hidden elements。

ignore: []  // ignore nothing, validate everything

在您的代码中：

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

或：

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

bootstrap-combobox（丹尼尔·法雷尔）和 jquery-validation-plugin

bootstrap-combobox (by Daniel Farrel) and jquery-validaiton-plugin

jquery

jquery-validate

twitter-bootstrap