Fix validation classes when using b:formGroup

[ggam]

Still needs more testing.

Known issues (some of them not related to this PR, but I'll try to address them here anyway). They are all related to inline forms:

• Responsive classes should be ignored on inline forms as they misalign components. Example components where the error is visible:
  • selectOneMenu
  • dateTimePicker
  • selectBooleanCheckbox
• Some components don't add the control-label class to labels on inline forms. has-error has no effect on them. Examples:
  • selectManyMenu
• datePicker is not correctly shown on inline forms (probably because of one of the above mention errors).

Additionaly, since datepicker has no renderer (it renders itself), I made a little hack there and put the instanceof to check if the parent component is a formGroup. I'll think of a better approach when everything else is working.

I've also finished fixing the colorPicker not rendering label by default.

[ggam]

I think I've fixed all the above mentioned problems:

• All the labels now have the "control-label" class
• Inputs and labels inside inline-forms don't render responsive classes. I've made a really ugly check here (see Responsive#shouldRenderResponsiveClasses method), but I think it will work for now.

I'll test it all once more at the end of the day, but it will help is someone else can review the code.

[stephanrauh]

@ggam Yesterday, I've started to add the Bootstrap validation classes to the sliders, but truth to tell, I don't know how to do it. Adding control-label was simple. Do we want to add a CSS class to the slider component itself to indicate the validation status?

[ggam]

Is Slider a Bootstrap "plugin"? Is there a possibility to ask the author how is it supposed to work?

[stephanrauh]

I've stumbled over this yesterday, too. I guess the code is correct. But can you explain how it works?

[ggam]

To be honest, I have to admit that I don't know. I copied it from another component where it worked.

I know that's not the way to do things, but my priority for now is to fix our markup for 1.1.0. When this is merged, I plan to review all the code and propose a simpler and more unified solution, where cumbersome methods like this would dissapear.

I'm currently working on fixing the responsive classes for the components where it dind't work yet. After that I guess I could start to review code to potentially refactor.

[stephanrauh]

In general, the PR looks OK to me. I've left one comment at a line I didn't understand. It's almost certainly correct, but I'd like to know why.

The rest is testing, testing, testing :). Is the PR ready to be merged?

[stephanrauh]

As for the slider: I've opened an issue.
seiyria/bootstrap-slider#741

[stephanrauh]

I've already got an answer. Let's start with coloring the border red if the slider is in an erroneous form-group. Something like this HTML code:

<div class="form-group has-error">
  <label class="control-label" for="age">Please enter your age (18-65)</label>
  <input id="age" data-slider-id='ex1Slider' type="text" data-slider-min="0" 
    data-slider-max="99" data-slider-step="1" data-slider-value="14"/>
</div>l

[ggam]

Work on this PR is finished. It just lacks proper testing. If you are ok with that, you could merge it now and then we all will test as we develop. And after that, a more torough testing should be done also as with everything else.

From what I see from the slider, the idea is to do it like on all the other inputs no? Would you like me to add it t this PR befpre merging?

[stephanrauh]

Yes, the idea with the slider is to provide the same API as for the other input widgets. Not sure that idea makes sense. But that's why we discuss it - to find out whether it makes sense or not, and how to do it.