Making Select Field Required

[ATOPBIO]

Hello, when using slim-select with a required attribute no error will display in the browser and the form will not submit without showing any message.

Is there a workaround for this?

[ChipRyan]

Having the same issue

[demmmmios]

Try this one

select[data-ssid] {
  pointer-events: none;
  opacity: 0;
  display: flex !important;
  position: absolute;
}

[columbian-chris]

This should be added to the core stylesheet.

[bennpham]

To add on top of this:

Is it possible for slim-select to just use opacity: 0 on the select input field rather than set style=display:none? I notice I'd have to set

.ss-main {
  display: flex !important;
};

on top of @demmmmios solution here in the case where I call an AJAX request (using HTMX) to change the content inside of the select options so the ss-main doesn't disappear after loading the new DOM content.

[demmmmios]

I think this project is no longer in development, or maybe i am wrong, but look on issues and last release tag :(

[brianvoe]

Hey everyone. Sorry for not replying on this. I released a new version of slim select. As for this issue. Slim select does add display none to the original select. I cant say that just setting the opacity to 0 would be a better option. That being said, once you initiate SlimSelect there is a function couple layers deep you can call.

var slim = new SlimSelect({})
slim.render.showUI()

// Then you can add whatever style you want to it.

Hope this helps. Check out the new version and let me know your thoughts.