jQuery Validation for select 与 Bootstraps Chosen-select 冲突答案

【问题标题】：jQuery Validation for select is conflicting with Bootstraps Chosen-selectjQuery Validation for select 与 Bootstraps Chosen-select 冲突
【发布时间】：2016-11-22 10:00:00
【问题描述】：

我的应用程序中的选择框与选择的选择冲突。下面是一个示例代码。

HTML

    <form name="test1" id="test">
        <div class="form-group">
                        <label class="control-label col-sm-3" for="pwd">Course code:</label>
                        <div class="col-sm-9">
                            <select name="search_course" data-placeholder="Select Courses"  id="search_course" class="chosen-select form-control" tabindex="8" style="width:60% !important;" <?php
//                            if ($readOnly) {
//                                echo 'readonly';
//                            }
                            ?>> <option value=""> Select</option>
                                        <?php
                                        if (!empty($courses)) {
                                            foreach ($courses as $values) {
                                                ?>
                                        <option value="<?php echo $values['idvs_crs_id']; ?>" <?php
                                        if ($values['idvs_crs_id'] == $post_values['search_course']) {
                                            echo 'selected';
                                            $selected_course_name = $values['idvs_crs_code'] . ' - ' . $values['idvs_crs_title'];
                                            $selected_course_code = $values['idvs_crs_code'];
                                        };
                                        ?> ><?php echo $values['idvs_crs_code'] . ' - ' . $values['idvs_crs_title']; ?></option>   
                                                <?php
                                            }
                                        }
                                        ?>
                            </select>
                        </div>
                    </div>
    </form>

jQuery

$.validator.setDefaults({ ignore: ":hidden:not(select)" });
$("#test1").validate({
        onkeyup: false,

rules : {
   search_course:{
      required: true,
}
},
messages: {
    search_course: {
        required: "Please select a course code"
    },
}
});

为了解决这个问题，我搜索了stackoverflow并找到了一个解决方案来放置以下内容

$.validator.setDefaults({ ignore: ":hidden:not(select)" });

我在.validate 上方添加了它并使其正常工作，但问题是错误未对齐并且选择框被移动以为错误腾出空间。错误应该在选择框下方。有没有办法解决这个问题。下面是我遇到的问题的截图。

【问题讨论】：

能否也提供给我们html？
会很长。还好吗？
仅向我们显示此表单的相关 html
我已经在上面更新了，只有一个选择。请检查
“请选择课程代码”标记在哪里生成？我在任何地方都没有看到它......

标签： javascript jquery twitter-bootstrap validation

【解决方案1】：

我认为您需要通过编辑 showErrors 方法来更改 HTML 上的错误位置。

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        if (errorList.length < 1) {
            // clear the error if validation succeeded
            $('label.error').remove();
            return;
        }
        $.each(errorList, function(index, error) {
            $(error.element).next('label.error').remove();
            $(error.element).after(
                $('<label/>')
                    .addClass('error')
                    .append($('<em/>').text('this is some em'))
                    .append(error.message)
            );
        });
    }
});

检查working example。

您能否分享输出的 HTMl 以使函数适应您的标记？

===

这个答案来自 Darin Dimitrov。查看完整答案here

【讨论】：