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

检查working example。

您可以共享输出的HTMl以使功能适应您的标记吗？

===

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

select的jQuery验证与Bootstraps Chosen-select冲突

1 个答案: