Parsleyjs 2 and Bootstrap 3 input text field with addon obscuring on errors

Question

I am currently trying to implement Parsleyjs 2.2 to work nicely with Bootstrap 3.3. But I am experiencing some problems with getting the errors displayed beneath the text-field with an addon (input-group-addon).

I have tricked a bit with the HTML/CSS to get the kind of responsive behaviour that I wanted, but here is the underlying 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="[email protected]" 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

You were soo close! You need to set the errors container to the .form-group as well.

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