Parsleyjs 2和Bootstrap 3输入文本字段与附加掩盖了错误

Question

我目前正试图实施Parsleyjs 2.2以很好地与Bootstrap 3.3配合工作。但是我在使用addon（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'); 
},