最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Parsleyjs 2 and Bootstrap 3 input text field with addon obscuring on errors - Stack Overflow

programmeradmin3浏览0评论

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</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>

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.</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>

Share Improve this question edited Jan 13, 2016 at 11:04 Henrik O. Skogmo asked Jan 13, 2016 at 9:07 Henrik O. SkogmoHenrik O. Skogmo 2,0134 gold badges20 silver badges26 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 10

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');
},
发布评论

评论列表(0)

  1. 暂无评论