Bootstrap 4 validation pseudo classes not being applied properly when new options are appended dynamically

[ghost]

@peppem80 commented on Mar 20, 2018, 4:28 PM UTC:

Hi,
Thank you for sharing bootstrap-select with the community.

I'm using the 1.13.0-beta version with bootstrap 4 and its validation.
https://jsfiddle.net/2cLc359h/28/

It works fine, but when new appended on select then it recognizes the select as valid also if any value is selected

This issue was moved by caseyjhol from snapappointments/bootstrap-select-temp#26.

[ghost]

@caseyjhol commented on Mar 20, 2018, 9:13 PM UTC:

This seems to be working as expected to me. If an option isn't selected, the select is invalid. If an option is selected, the select is valid. Can you elaborate a bit on the problem?

[ghost]

@peppem80 commented on Mar 20, 2018, 9:35 PM UTC:

You're right, I miss some important detail in explaination.
It works fine without add dinamically any option.

But if you click on "add option" link (that append one more option), the validation stop to works correctly, and despite any option selected it mark as valid (green border)

[ghost]

@caseyjhol commented on Mar 20, 2018, 9:49 PM UTC:

Hrmmm - here's the steps I'm following:

1. Click "add option"
2. Click "Submit"
3. See a red border on both the select and the "other control" element

You say you're seeing a green border for step 3? What browser are you using?

[ghost]

@peppem80 commented on Mar 20, 2018, 10:43 PM UTC:

Yes, just as you described!

With Chrome works fine.
With firefox 59.0.1 can't work as expected (green border on selectpicker)

[ghost]

@caseyjhol commented on Mar 20, 2018, 10:57 PM UTC:

I see the issue. Even though the value of the placeholder option is empty, Firefox is falling back to the option's text for the value, so it "thinks" a value is actually set for the select. I don't see why the text of the placeholder option even needs to be set, so it should be an easy fix.