contact form with standard Bootstrap validation

[vitabef]

Hello! Thank you for your work! I’ve encountered an issue where I need a contact form with standard Bootstrap validation. The form submission functionality is handled through Cloudflare Pages Function – no issues with that. However, the Bootstrap validation doesn’t work – the classes like :invalid, :valid, .was-validated, etc. are not recognized. How can I extend the functionality locally without rewriting mod-bootstrap etc. for this? Thanks!

[markdumay]

Glad you like the theme! I haven’t looked into bootstrap forms yet, however, it’s on my to do list. I’ll look into it shortly. Meanwhile, did you enable CSS purging? Does it help if you disable it?On 11 Sep 2024, at 13:45, vitabef ***@***.***> wrote: Hello! Thank you for your work! I’ve encountered an issue where I need a contact form with standard Bootstrap validation. The form submission functionality is handled through Cloudflare Pages Function – no issues with that. However, the Bootstrap validation doesn’t work – the classes like :invalid, :valid, .was-validated, etc. are not recognized. How can I extend the functionality locally without rewriting mod-bootstrap etc. for this? Thanks! —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[vitabef]

Indeed, that was the issue! Thank you! Now I probably just need to figure out exactly what I need to declare in the safelist for PostCSS, right? Or am I wrong?
In any case, a big thank you, that helped me move forward!

[markdumay]

Great! The styles are probably defined somewhere here: https://github.com/twbs/bootstrap/tree/main/scss/forms

Feel free to submit a PR with the safe-listed style, so the hinode theme would support these form validations too.

[vitabef]

To make it work, I had to change this :

// postcss.config.js
...
safelist: ['was-validated', //This class was added by me to safelist
    ...whitelister([
...

I use the class "was-validated" in my JavaScript on form submission. I didn't have to change or add anything else – everything worked out of the box with purge = true in params.toml

[markdumay]

Thanks! I updated the code in Hinode too, see release v0.27.0-alpha6.