Form Validation While Typing

// CLONE IT

// FREE resources

// Premium content

// Discounts
🎢 Get 10% GSAP: WEBBAE10

// Connect

00:00 Intro and Demo
01:12 Agenda
01:56 Webflow Project Setup
5:11 Code Walkthrough
10:35 Implementation - Linking the code up with Webflow
16:07 Publish!
16:40 Subscribe to my YouTube Channel and SMASH that like button

[parasshah]

Just did something like this on a recent project, and learnt about `checkValidity()` method that exists on form elements by default (for inputs and select elements).

With it, you can leverage the inbuilt browser form validation mechanism that happens on submit, without triggering the submit. The code for it would look something like this (`formEl`, and `submitButtonEl` being the respective `form` and `submit button` DOM nodes):

=> {
inputEl.addEventListener('input', () => {
if (formEl?.checkValidity()) {
submitButtonEl.disabled = false;
} else {
submitButtonEl.disabled = true;
}
});
});

And if you want to set some custom regex checking (for example the phone number), you can do that using the `pattern` attribute on the input.

[einben]

Only 10mins in and this is already super helpful. Learned so much that goes beyond basic Webflow stuff (Custom Code). Keep up the great work, I hope it pays off for you.

[hi_]

This is GOLD, I'll try it out and let you know how it went!

[mullanada]

Thank you for this! Do you have any examples anywhere for it you want to add more fields, as in, I want to set this up so that it changes color for all required fields in my form, which is things like First & Last name.

[josephgraham]

This is pretty awesome. I wonder if it's possible to add a validation element to this process. Ex: Limiting personal emails (gmail, icloud, yahoo, etc)

[AndrewGordonLSW]

Hi Web Bae! I love the video - already watched it several times. I have put your code into my webflow site and changed the ID of the phone and email items as instructed but I am still not seeing success. I even cloned your project and pasted the pages inside my website and they are working but it's just not working on the one form page that I already have well built out for my website. If you wouldn't mind connecting I have DM'd you on Twitter and would love to connect. Perhaps I am missing something that you can spot in a minute! Thank you.

[heatherliu]

I know you’re put together bc you own a shirt like that

[robadobdob]

Personally, I avoid real-time validation because it can be off-putting.

Imagine if someone asked you a question and then said you were wrong after each word in your reply until you got to the correct answer.