Display invalid-feedback

[Ard4nis]

We are using the plugin to generate a searchform, and when returning a form with an error in, due to not finding the content being searched for, it correctly colors the search bar red and adds the icon.

But we return the form with an error, which gets added to a div under the search bar, but this div has the class invalid-feedback, which results in it being hidden. Is there anyway to work around this within your plugin?

[adrianhurt]

Sorry, I suppose it's too late. Could you give some code example?

[Ard4nis]

Hi, sorry for the late answer, was at a wedding all weekend.

Here is an example of how we use the plugin in our template:

<div class="form-group">
   <div class="col-md-12 col-lg-12">
      @b4.inputWrapped("search", searchForm("searchCriteria"), 'placeholder -> "F.eks. 12345678-9abc-def0-1234-123456789012, xx@xx.dk eller K00XXXXXX", 'required -> true) { input =>
         <div class="input-group">
            <div class="input-group-prepend">
               <span class="input-group-text">
                  <i class="fas fa-search"></i>
               </span>
            </div>
            @input
            <div class="input-group-append">
               <input id="searchSubmitBtn" type="submit" class="btn btn-primary" value="Søg">
            </div>
         </div>
      }
   </div>
</div>

And when we return the form with an error this is the resulting html on the page:

<div class="form-group">
   <div class="col-md-12 col-lg-12">
      <div class="form-group   has-danger" id="searchCriteria_field">
         <div class="input-group">
            <div class="input-group-prepend">
               <span class="input-group-text">
                  <i class="fas fa-search"></i>
               </span>
            </div> 
            <input type="search" id="searchCriteria" name="searchCriteria" value="kes" aria-describedby="searchCriteria_error_0" placeholder="F.eks. 12345678-9abc-def0-1234-123456789012, xx@xx.dk eller K00XXXXXX" class="is-invalid form-control" required="true" aria-invalid="true">
	    <div class="input-group-append">
               <input id="searchSubmitBtn" type="submit" class="btn btn-primary" value="Søg">
            </div>
         </div>
         <div id="searchCriteria_error_0" class="invalid-feedback">Søgning gav intet resultat</div>
      </div>
   </div>
</div>

This results in the following being shown:

Where the searchCriteria_error_0 isn't being shown under the search bar as expected, because we would like to also show the user with text that an error has occured.

[adrianhurt]

Oh, I see. Actually, this is a Bootstrap's bug. You can check it here:
twbs/bootstrap#23454

However, you can see there the class has-danger. Play-bootstrap adds automatically the classes has-success, has-warning and has-danger to .form-group when corresponding. Then you can add your custom CSS to achieve this case.

.form-group.has-danger .invalid-feedback {
    display: block;
}

By the way, I think to have nested .form-groups is not a "best practice", but it's not the problem here.

[adrianhurt]

I'll update the docs to explain that better...