Custom Form Select - Requiered: Show error

Attributes
1

Hello Finsweet team! I integrated the Custom Form Select attribute (Custom Form Select Field for Webflow) to customize the selectors.
They are required fields.
Everything is working perfectly, except that if the user doesn’t choose an option, the error message indicating that the field is required doesn’t appear.

You can see the form here: Contact | Light-it

Is there a way to fix this?

2

hey @andressentis! can you share a read-only?

3

yes, sure!
https://preview.webflow.com/preview/lightit?utm_medium=preview_link&utm_source=designer&utm_content=lightit&preview=3da176c12f642ffb213f638c41d14c75&workflow=preview

You can find the form in the footer of almost all the pages.

4

Hey Luis! hope you’re doing well,
do you have any update on this? thanks a lot!

5

hey @andressentis! sorry for the late response, I have just tested one of your forms and it seems to be preventing submission if any required field is left empty.

Did you do something to solve this issue?

6

Hey Luis, no proble.
Yes, I solved with Javascript, will be awesome if in the future the attribute cover this issue

1 Like
7

I have this same issue / question @Support-Luis ! Is there a Finsweet way to show the error if the select is empty?

8

@andressentis , are you able / willing to share the javascript that you were able to implement? Thank you!!

9

Hey @_theclevernod! There is no official Finsweet solution at the moment I’m afraid. Custom JS is the way to go

10

If anyone is still searching for solution:

Paste select inside of dropdown-toggle and make it visible, but opacity 0. This will help to make error tooltip visible if field does not have any value.
2024-06-27_12-57-58

Also you can add pointer-event:none (so it is not clickable)

1 Like
11

I’m still having an issue with this

anyone else find a solution

12

Hey @lovebrian649!

Does @asad 's response here not work for you?

If anyone is still searching for solution:
Paste select inside of dropdown-toggle and make it visible, but opacity 0. This will help to make error tooltip visible if field does not have any value.

2024-06-27_12-57-58
2024-06-27_12-57-58284×111 5.02 KB

Also you can add pointer-event:none (so it is not clickable)

If not, could you please open a new thread with your links? I will take a look!

13

@Support-Luis

Hi Luis

I was able to find success using this code and making sure the initial placeholder option had an empty value field

<script>
  document.addEventListener("submit", function (e) {
    const dropdown = document.getElementById("myDropdown");
    if (dropdown.value === "") {
      e.preventDefault(); // Prevent form submission
      alert("Please select a valid option.");
    }
  });
</script>
14

Thank you for sharing @lovebrian649!