In this video, we cover form validation using JavaScript. This episode is part of the Webflow Forms Master Class series, and it assumes you already know how to set up a custom form in webflow (you can learn this here: ). We validate the data coming into a form and protect it and handle errors. We cover three different levels of form validation which should be used to prevent the submission of a form before an AJAX function is run.
Transcript
Hello and welcome to another episode of webflow enco which I teach where I teach you the underlying code you’re writing a webflow today we’re going to cover a very widely discussed topic which completes the webflow forms Master Class series that I started many many moons ago today we’re going to be covering validation Yes you heard it correctly proper form validation using JavaScript
I’m going to cover a couple of methods to validate the data coming into your form but also protects your form as well so here we have a basic form we’ve already kind of covered this right if you were to look back through the webflow forms masterclass series we already know how to read the values of your inputs but in order just to make a crystal clear and to help you a little bit along that way let’s go through what we’ve done in the past already but in
The context of validating the form so the first thing we want to do is actually just get our form we’re gonna go form just to show you I’ve marked up the HTML there I’ll keep that there just for my own reference too so we’ve got our form it’s really important that we bind a submit event listener because yes a we could bind a click to the submit button but it’s not it’s not capturing a submission of that form it’s just capturing the click so what I mean by
That if I was to hit enter on this form it’s not capturing a click there’s no click happening so we need to add the submit event listener on to this formula I think we’ve spoken about that in the past prevent default this will stop the form submitting and it allows us to do whatever it is that we want to so for console.log and we take a look at that hit enter got our submit event um and we can access various different
Uh elements let’s say we want our name it’s a bad example but let’s say we want our name to be at least three characters okay so if we take our name field here query selector and then we go name equals name you can you can get your element however the hell you want I really don’t mind I I think this is quite a nice way because there should really only be one name element on the page you could scope this so it’s even more specific so inside of
The form we query selector I quite like that uh but regardless let’s have a little look if I console log our and I put my name there now we can go value save we can get the value of our name we can do so much with that now okay we can we can go uh dot length length if I can spell length three so we could say
If length is less than three then uh we should return because we want to stop the code progressing even further but what I would probably do is I would create a um errors array and I would push errors dot push name should be longer than three characters okay
And then if errors dot length so if basically there’s something in this array then I would probably then return and do some error handling so we could if we go here and go uh UL errors I would go errors dot four each errors equal form dot query selector
Errors errors dot inner HTML plus equals so what we’re doing We’re looping over each of the errors and adding an Li inside of the um error UL here and we are basically inputting the the actual text that’s here inside of the Allies so oh um let’s do that and there we go and this is now
Preventing that submission form now here you would have your Ajax uh function that we’ve already covered but let’s talk about the three different kind of levels of form validation the first one you’ve got is obviously in the HTML itself so you can have this as required calls required uh you could have a pattern this will be a regex and that says only numbers are allowed in this field and we’ll throw an error that’s another way to do it so
That’s HTML validation the next line of defense is the JavaScript validation which is what we’ve spoken about on the right here and then the last song defense which have no control over inside of webflow is just back-end validation basically we could do as many uh different types of validation here as we want so we could do a match we could do a regex to say something like well we could do the same thing as we did just now we could only allow numbers so if
There are no numbers then we say errors don’t push name should contain numbers now this is a terrible example because numbers uh a name shouldn’t um involve numbers but you can see where I hope you can see where we’re going with this that you’re basically interrogating the value of the field now this is my way of doing it I’ll push it to a thing if if there’s no errors so console.log no errors
So it should only get to this point if all of the fields so um Sam one two three four oh what an idiot should be no errors that’s kind of a way to start to validate our form so it never gets to the Ajax function by interrogating the value field okay I want to introduce you to a product that I’ve built with a good friend of mine heck is my channel I’m responsible with my own products if I want Joan fracarity
Prompts you every day to answer three simple questions what excited you today what drains you and what are you grateful for and I was before we should ask to reflect on your time and think about themes and trends that keep reoccurring and whether you feel good about them or bad about them this encourages you to adapt your life and focus on what matters and right now we’re actually crowdfunding in order to raise funds to build some exciting new
Features that we have planned for the product so if you head down in the description below there’ll be more information on how to sign up thank you for supporting German for clarity I think German for clarity for sponsoring the channel oftentimes a little reflection can go a long way so along the same sort of lines as uh validation is preventative methods to stop spam emails right and the easiest way we can do this is a thing called a
Honeypot and what this is it’s a special field is by all means not foolproof because uh spam Bots will get more intelligent and various things like this but it’s just it’s a good starting point to actually prevent unwanted submissions from spam a recent article that I found which I’ll link to below actually says that they’ve had a lot of success using a Honeypot let’s jump in and Implement a Honeypot all it is that makes the space here is
An input field like a check box input field okay um and we’ll call it honey here um some sort of message for accessibility used to say do not check check this box because the assumption is that spam Bots will come onto your form field and fill out every single form element right regardless of what it is it will just try and fill it all out so a human won’t
Check this box but a a bot will and now we want to actually hide this stuff and we’ll I I did a did a uh episode on SR only class A long long time ago but what it enables us to do is effectively just hide things visually but then still allow them to be like visible and they’re putting a tab index of minus one as well let’s take let’s get RSI only class yes let’s just take that CSS now you can see that our form field is effectively hidden now
All we’re going to do is just say uh let’s get our Honeypot form dot query selector um we’re gonna say if uh Honeypot I think it’s checked uh errors dot push please do not check the box something like this looks like we need to clear that so let’s just cool
Please do not check the box now we have an error that says that they shouldn’t check the box we uncheck that and then the the value should go so that’s the honey box technique so now the the other form which webflow supports is the recapture but webflow have a great article in setting up the recapture but if we are looking into the if we need if we want to implement our own form and our own verification and validation then we need to do a little bit extra with
The JavaScript to make sure that we can check the value of the recapture and that is very simple so this is the method we need here and all it basically is we just basically need to check if there is a response we don’t need to pass anything unless there are multiple recaptures on the page then we need to give it the uh recapture that we wanted to check the the response from but we just need to Simply say or if there’s no response basically
And that’s pretty much it or if you don’t have a Honeypot and please do not please fill out the re-capture that is form validation in a complete nutshell so if you do want to see more form um implementations then do let me know check out the forms masterclass series I hope this brings it full circle and until next time happy no coding