Parsleyjs 2和Bootstrap 3输入文本字段，其中addon模糊了错误

Question

我目前正在尝试将Parsleyjs 2.2与Bootstrap 3.3很好地配合使用。但是我遇到了一些问题，使用插件（input-group-addon）将错误显示在文本字段下面。

我已经用HTML / CSS欺骗了一些我想要的响应行为，但这里是底层的HTML / JS：

$('.signupForm').parsley({
  successClass: 'has-success',
  errorClass: 'has-error',
  classHandler: function(el) {
    return el.$element.closest(".form-group");
  },
  errorsWrapper: '<span class="help-block"></span>',
  errorTemplate: "<span></span>"
});

<form class="signupForm" method="post" accept-charset="utf-8" action="" data-parsley-validate="">
<div class="form-group">
    <label class="control-label" for="subdomainInput">Subdomain</label>
    <div class="input-group">
        <span class="input-group-addon" id="subddomainAddon">https://</span>
        <input type="text" class="form-control input-lg" id="subdomainInput" required="">
        <span class="input-group-addon" id="subddomainAddon">.domain.com</span>
        <!-- <span class="help-block">Errors appears here</span> -->
    </div>
    <!-- <span class="help-block">Errors should be here</span> -->
</div>

<div class="container-fluid">
    <div class="row">

        <span class="form-group">
            <div class="col-sm-1">
                <label for="nameInput" class="inlineLabel">Name</label>
            </div>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="nameInput" placeholder="John Doe" required="">
            </div>
        </span>

        <div class="form-group">
            <div class="col-sm-1">
                <label for="emailInput" class="inlineLabel">Email</label>
            </div>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="emailInput" placeholder="john@example.com" required="">
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-sm-12">
            <br/>
            <button type="submit" class="btn btn-danger">Register</button>
        </div>
    </div>
</div>

Answer 1

你太近了！您还需要将errors容器设置为.form-group。

errorsContainer: function(el) {
    return el.$element.closest('.form-group');
},