Required Notification Not Showing on multiple select

I'm using your multiple select dropdown and i have added the required attribute onto the select but if i did not select any of the options it does not display the Please Select An Item In The List message as normally it would on Google Chrome version 69.0.3497.100. Any issues here or I have missed out anything

<select name="colab[]" id="colab" class="form-control" placeholder="Select Your Member" required multiple>
    <option value="" disabled>Select Your Member</option>
    @foreach ($allUser as $users)
    <option value="{{$users->u_id}}">{{$users->name}}</option>
    @endforeach
</select>

new SlimSelect({
    select: '#colab',
    placeholder: 'Select Your Member',
});

[brianvoe]

This is an interesting one. Havent had anyone need it yet. Let me put some thought in how i would get this to work with slim select.

Alright thank you

[brianvoe]

Well let me start by asking you what do you expect to happen?

Well, i have a form that i need all the fields to be required including the mutiple select. So if i select on my submit button without selecting any item in my select it would display as the message Please Select An Item In The List similar to Google Chrome's required message

[brianvoe]

Thats what i figured. Let me figure something out

[maciej-laskowski]

I stumbled across this one as well but didn't want to flood @brianvoe with my problems too much ;) Native browser validation does not work as it's applied on the original select element that is hidden by slim-select. I initially considered adding oninvalid event to the original select

<select id="single" oninvalid="this.slim.slim.container.classList.add('is-invalid')">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
  <option value="value 3">Value 3</option>
</select>

This simply add a class to slim select element as original select gets invalidated. Slim could register such event listiner internally.

Anyways, the other problem is that only Webkit allows to style those inline bubbles as they call them and I need to style validation errors so I dropped native validation in favor of BunnyJS for now. Maybe it is a solution for you @dextersiah1998 as well?

[maciej-laskowski]

@dextersiah1998 I believe I found a reliable way to enable native browser validation in slim-select, I'll try to submit a PR soon.

[brianvoe]

👍

[brianvoe]

The more i look into this i would suggest using the beforeOnChange to validate the value before allowing it to change. I looked the pr that made css changes to trick the browser to being there and came a couple of issues that didnt seem like it was as good at utilizing the beforeOnChange callback for validating value changes.

Im open to discussion but im going to close this for now.

[maciej-laskowski]

@brianvoe Thank you for your feedback! beforeOnChange can be used to validate the selection but not to validate whether anything has been selected at all which is the required attribute intention so it is not ideal.

[brianvoe]

I do hear what your saying. I personally would utilize the data that slim select provides for you to validate the data. What i would suggest if you need to utilize the required attribute on the original is to override with "!important" fields the css that controls the original select. That way you can fully accommodate your needs.

I did a little research and looked at both select2 and chosen. Chosen went with the display: none; select2 did border: 0!important; clip: rect(0 0 0 0)!important; -webkit-clip-path: inset(50%)!important; clip-path: inset(50%)!important; height: 1px!important; overflow: hidden!important; padding: 0!important; position: absolute!important; width: 1px!important; white-space: nowrap!important;. I think for the majority of users the display: none is a better option.

[stanolacko]

Problem is, that currently I you are not testing values in form by some JS and you want to take advantage of HTML5, you are not able to use it with slimselect. When you have empty with slimselect, Browser do nothing after submit, becasue you get Javascript error: An invalid form control with name='person' is not focusable. Solution from maciej-laskowski works. I preffer to use his idea.

[brianvoe]

The simple solution is style the original select however you want. It currently sets it to display: none. but you can set it to something that better suites your needs.