javascript - 带有插件隐藏错误的 Parsleyjs 2 和 Bootstrap 3 输入文本字段

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

你们太亲密了!您还需要将错误容器设置为 .form-group。

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