Hello there!
Join the community and get awesome updates on what's happening 👀
So, I was asked to create an email input that was properly validated so when the user inputs an email address with the wrong formatting (e.g. foo@foo , foo.com, foo@.com) the form doesn't get submitted and also shows an alert message giving feedback about the error.
At first I thought this could be easily accomplished setting the input to required and its type to "email", silly me, of course it wasn't.
Then I found a very promising solution using a custom attribute for "pattern" which is basic HTML5 telling the field it should only accept inputs with this specific formatting, and it looks like this:
Then I found a very promising solution using a custom attribute for "pattern" which is basic HTML5 telling the field it should only accept inputs with this specific formatting, and it looks like this:
At this day, I still don't know why it didn't work (if you do please let me know, you can find me on twitter) so I had to turn into custom code. That's where the awesome Slater App steps into the game. If you're like me and you're not really code-savvy you'll find this very useful.
Slater is an AI that creates, debug and explain scripts based on prompts from the user. Here's how I got my custom code up and running in less than 2 minutes.
Prompt:
Hi there! can you create a script to validate an email input field with ID "signUp" ? it needs to have the full email address format.
The script that I got:
Slater is an AI that creates, debug and explain scripts based on prompts from the user. Here's how I got my custom code up and running in less than 2 minutes.
Prompt:
Hi there! can you create a script to validate an email input field with ID "signUp" ? it needs to have the full email address format.
The script that I got:
Of course I took the liberty of customizing the error message copy, that doesn't sound like Slater at all lol.
So then I just copied + pasted it in an embed element* in my Webflow project, published it and there it is my validated input. 🎉
So then I just copied + pasted it in an embed element* in my Webflow project, published it and there it is my validated input. 🎉
*I have to make clear that Slater can be connected to your Webflow project and actually host all the custom code and update it directly without you having to publish on Webflow.
I only did it this way for showcase purposes. :)
I only did it this way for showcase purposes. :)
To sum things up, yes, I do say hi to AI and yes, this is a very simple functionality that should come native in Webflow (once again, if I'm wrong about this and if there's a way to do this natively pretty please let me know). Also yes, you can use Slater to create custom code and to learn how it works. Pretty cool huh?