BS4: validation support for custom form controls

[nickschot]

It's been a couple of months since I tried to do this, but I think it's still a thing.

Currently it seems there is no support for adding validation support to custom elements (e.g. ember-bootstrap-power-select).

After some more digging the problem is BS4 related. BS4 changed the places where validation classes are added. As an example:

BS3

<div class="form-group has-error">
    <label class="control-label">Input with error</label>
    <input type="text" class="form-control">
    <span class="help-block">Some validation error</span>
</div>

BS4

<div class="form-group">
    <label >Input with error</label>
    <input  class="form-control is-invalid">
    <div class="invalid-feedback">Some validation error</div>
</div>

The biggest difference is in the way the CSS selectors to display the validation works. In BS3 the wrapping form-group has a class denoting that an error should be shown, so nesting of form elements doesn't matter (i.e. the validation "help-block" doesn't need to be next to the input).

In BS4 the CSS selector is as follows: .form-control.is-invalid ~ .invalid-feedback which means it should be a sibling of the form-control. Now in the default cases this isn't a problem, but when wanting to (nicely and reusably) add a custom form control for i.e. a currency field you get the following:

Usage:

{{form.element controlType="currency" label="Budget" property="budget" }}

Resulting form element HTML:

<div class="form-group">
    <label class="ember-view">My Currency Control</label>

    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">$</span>
        </div>
        <input class="form-control is-invalid" type="text">
    </div>

    <div class="invalid-feedback">Budget must be positive</div>
</div>

Now .invalid-feedback is in the wrong place for the validation styles to work (as it is not being rendered by the control).

I cannot yet think of a clean solution within the established components.

[simonihmig]

Just checked, it is working for us in an app. Here an example:

{{#form.element
    controlType="power-select"
    property="selectedCountry"
    options=countries
    data-test-selector="country"
    label=(t "address.form.label.country")
    placeholder=(t "user.form.placeholder.choose")
    showValidationOn="change"
  as |el|
  }}
    {{#el.control
      searchEnabled=false
    as |item|
    }}
      <span data-test-select-option={{item.code}}>{{item.name}}</span>
    {{/el.control}}
  {{/form.element}}

Note: copy-pasted this, if you don't need all the customizations, then this can be simplified a lot...

The critical piece is probably showValidationOn="change", as there if no focusout event for power-selects (which is the default event for showValidationOn). Hope that works for you as well!?

[nickschot]

I'll be working on this soon, will report back if it worked. I probably missed that showValidationOn. Is that in the docs? Else we might want to add it.

[simonihmig]

Is that in the docs?

Yes, at least in the API docs: http://www.ember-bootstrap.com/api/classes/Components.FormElement.html#property_showValidationOn

Else we might want to add it.

It probably makes sense to mention this in the context of custom controls. Tbh, there is quite a lot actually that could be improved for the docs...

[nickschot]

Updated the main issue/title with new findings from a small back-and-forth w/ @simonihmig .

[wukongrita]

@nickschot have you solve this?

[nickschot]

@wukongrita no, ember-bootstrap needs to be updated to support this.

[elgordino]

I got a workaround going for a situation where I wanted to add a custom input group, which is to add the el.validation state as a class to the element which is a sibling before the .invalid-feedback element.

eg

{{#form.element 
    class=formElement.class
    label=formElement.label
    helpText=formElement.help
    property=formElement.property
    showValidationOn=formElement.showValidationOn
    as |el|}}
    <div class='input-group {{el.validation}}'>
        <div class="input-group-prepend">
            <span class="input-group-text">{{options.prepend}}</span>
        </div>
        {{el.control}}
        <div class="input-group-append">
            <span class="input-group-text">{{options.append}}</span>
        </div>
    </div>
{{/form.element}}

Then in the css

.input-group.error ~ .invalid-feedback {
      display: block;
 }

[simonihmig]

I have an extremely simple but seemingly effective solution: #603
Anyone here have any opinions on this approach?

Btw, we are not the only ones being unhappy with BS4's behavior, as you can see at this long thread: twbs/bootstrap#23454

Here is an example input group, that worked well with the solution above: https://github.com/kaliber5/ember-bootstrap/blob/2f94f1a6eb7c74b017d4e76dba31535ba8eee8e4/tests/dummy/app/templates/demo/forms.hbs#L109-L116

[nickschot]

That's a long thread! I'm fine with this solution 👍 . Seems like the simplest way to reliably "fix" it.

[pax7]

hey @simonihmig any idea on how to make .is-valid apply to the control under the .input-group div?

EDIT1: I see the feedback just fine; however I can't seem to be able to see the red X or the green V on the input of a custom control.

EDIT2: for anyone else looking for a potential solution to this, so far I am using this on my custom class=(concat "form-control form-control-sm" (if (gt el.validation.length 0) (if (eq el.validation "error") " is-invalid" " is-valid") "") ) . It does the job but I'm still wondering if there's another way to obtain the same effect.

[ishafayshahid]

Actually i'm using two input in form-group but when i'm going to use help-block it's working if any of two option is filled or select but i want it two working with particular input.

.....