Question

我有一个带有日期选择器的表单，该表单正在使用ParsleyJS进行验证。 datepicker在输入旁边有一个glyphicon，输入是必需的。

当用户没有输入任何日期时，Parsley会显示错误。但是，当发生这种情况时，glyphicon跨度会产生奇怪的行为，并且与输入的高度不匹配。

以下是我使用的代码以及发生了什么的演示（查看日期输入）。

我该怎么做才能解决这个问题？

<form>
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" data-parsley-required="true" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <input type="submit" />
        </div>
    </div>
</form>

<script>
    $(function() {
        $('#datetimepicker2').datetimepicker();
        $('form').parsley();
    });

</script>

Answer 1

你的问题是Parsley总是将<ul>的错误放在有错误的元素旁边，但在某些特殊情况下，例如你的，你想要另一个元素的孩子（在你的情况下你希望它与<div class="input-group date">处于同一水平。

因此，您可以使用parsley:field:error事件来实现这一目标。请尝试以下代码，并确保根据您的HTML更新div.date。

$.listen('parsley:field:error', function(parsleyField) {
    var elem = parsleyField.$element;

    // Whenever we're dealing with datepickers
    if (elem.parent('div.date').length > 0) {
        // Get the parent element of the input
        var topParent = elem.parent('div.date').parent('div');

        // Find the error list and append it to the parent instead of the input
        topParent.find('ul.parsley-errors-list').each(function() {
            // move $(this) to the bottom of top parent
            topParent.append($(this));
        });
    }
});

检查this jsfiddle demo。

当datepicker是必填字段时，修复glyphicon方面

1 个答案: