Community forum for knowledge and support

Updated 2 weeks ago

Required Checkbox In Contact Modal 2 Doesn't Display Browser-native Validation

Hi,
A required checkbox in contact modal 2 doesn't display the browser-native "Please fill in this field" dropdown below the field (like it does on any other form field) when unchecked. The user cannot send but doesn't know why.
Short video : https://share.cleanshot.com/pr3Phh4N
Staging page : https://sotel-7e1e30.webflow.io/
Read-only link : https://preview.webflow.com/preview/sotel-7e1e30?utm_medium=preview_link&utm_source=de[…]0&preview=00d3740489083e463835aa87c080a4bd&workflow=preview

L
M
R
24 comments

hi @Matt,
Do you think you might be able to give me an update on this one sometime this week ?
Cheers,

@Ludo yeah this is a webflow legacy bug - which is crazy. Something like Formly might help because it has its own form validation and error handling but you'd likely have to pay for it, which is not ideal. Its crazy to think that this bug still exists to be honest.

hey @Matt,
I told Webflow support about this. They're saying the browser native form validation field shows (like there's no bug), and he actually proved it to me with a screenshot.

I asked them to try it on my own form I'm waiting for their answer (just thought I'd update you on this).

Apparently it's not related to Webflow itself @Matt (will let you know what they find, but definitely not a Webflow bug, I just tried it out too and the form field validation shows when the checkbox s required and not checked).

@Ludo ah okay - lets take a look - can you re-send a preview link - the one above is broken now.

@Ludo completely vanilla form using only webflow native elements. The only thing I touched was adding a checkbox and making it required, and unchecked the box for email being required. You can see that the checkbox doesn't even render properly, which is wild to me. It also doesn't show the validation.
https://checkbox-required-bug.webflow.io/

the way that I read their message back to you is that - they can see that the validation is firing itself, but the UI (the really important message) is not showing.

just changed the checkbox to use "custom" styling and now the actual checkbox shows up now.

yeah I really dont know how they got it to work though in that first screenshot they sent...

Thanks a lot.
Yeah, I just replied to them.
I guess I'll just add a message like "check that box to submit the form" (lol) for that very client, and will see how to fix that on future projects.
Will keep you posted anyway πŸ™‚

ah im not done trying to resolve this haha

im on to a solution already but requires custom JS

shoot it must be something with the style guide, I just realized out of habit that I had cloned our SG, but I deleted the global styles embed

Wow, THAT's progress πŸ₯³

yeah now my SG version works but I dont know why, so now I'm going to start fresh again lol

alright.....found it

one line of custom CSS....WILD

@Ludo very unfortunate....terribly sorry that you've wasted so much time trying to troubleshoot this over something so silly. I'll be bringing this up to the team ASAP.

But the fix is to remove this custom CSS line from the head of your project - we have added this at some point in the past, I dont know when, to the style guide.

be sure to apologize to Webflow as well and if you'd like, mention Matt at Relume. What a wild turn of events....I guess because I just always use the SG, I just made a bad assumption that it was a webflow bug.

No worries, at least it's solved. Amazing !!
Thanks @Matt, you rock πŸŽΈπŸ™

Wow thx. I had the same issue suddenly

Add a reply
Sign up and join the conversation on Slack