選擇的jQuery驗證與Bootstraps選擇的沖突

Question

我的應用程序中的選擇框與selected-select沖突。 下面是示例代碼。

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上方添加了它，並使它可以正常工作，但問題是錯誤未對齊，並且選擇框已移動，以為錯誤留出空間。 該錯誤應該在選擇框下方。 有什么解決方案可以解決這個問題嗎？ 以下是我面臨的問題的屏幕截圖。

Answer 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)
            );
        });
    }
});  

檢查一個有效的示例 。

您可以共享輸出的HTM1以使功能適應您的標記嗎？

===

這個答案來自Darin Dimitrov。 在此處查看完整答案