How to submit a validated form with JavaScript [Form Validation Update]

So in our previous tutorial we saw how to validate a form with JavaScript but we didn't actually do anything after that!
Normally, once you've validated a form (and it's passed all the validation rules) you'll want to to submit it but as with everything there's more than one way to do this.
In this JavaScript tutorial we'll look at how to submit your form once the validation code has run and we'll do this first by just allowing the browser to carry on and submit the form to the 'target' URL.
We'll also look at some alternative ways, including running our own code after a callback or converting the whole validateForm function to a Promise to give you flexibility on where to run your submission code.
#javascript #formvalidation Channel Handle @codebubb

[@codewithbubb]

As always with JavaScript, there's more than one way to do things! Here's some ideas of how to submit your forms once you've validated the user inputs...

[@justnoone2205]

Great series! You seem to be the only one who make a form validation tutorial using an object to list out validation options. I definitely would like an updated version of this with even more options (radio, image file, etc.), versatility (avoid jumping into input of another form, using more than just attributes, login version etc.), and extend the sendToAPI part.
I have been learning & working with localStorage so I have encountered and dealt with many of the problems above in my own ways, but I would love to see a better way to handle them. The most important one for me is to know more ways to write and use the validationOptions lookup table, since I could not really find anyone making videos about form validation with it.

[@denjii___]

This is exactly what I have been looking for! I can't thank you enough for this awesome and fire tutorial. You just gained a new subscriber! from Philippines. Cheers!

[@codewithbubb]

Very glad to have you! I'm happy you found the tutorial useful.

[@VitoOnYoutube]

All your content is excellent! Thanks for yet another very instructive video 🙏

[@codewithbubb]

Thank you so much - appreciate the support 👍

[@BMikel]

I subscribed to your channel some time ago because it's an interesting stuff over here.

[@codewithbubb]

Great, glad to have you on board - appreciate your support 👍

[@bc4198]

Super useful!

[@codewithbubb]

Cheers!

[@supantha118]

Thank you so much!

[@tuckerhoog9609]

Instead of making the variable formObject with Array.from and filter and reduce..... couldn't you do new FormData(formElement)?

[@yasiruchamudithawijesinghe]

Thank You

[@codewithbubb]

You're welcome Yasiru. Are you coding your own form validation?

[@yasiruchamudithawijesinghe]

@@codewithbubb yes sir

[@BMikel]

You showed validation forms in the video. Do they use this kind of validation in real-life production?

[@codewithbubb]

Yes to the validation but probably not in the way shown here. 99% of places will be using React/Angular/Vue etc which comes with it's own form builders/validation libraries etc so you wouldn't need to necessarily write your own validation logic.
This method could be used if you're building a plain web app or a simple website that has some forms that need user input validating but you don't want to import a large JavaScript library just to do this one task.
Hope that helps.

[@BMikel]

@@codewithbubb i see

[@kjones-bouton7920]

Thanks - just what I was looking for. However after using your code, and change my validateAllFormGroups from forEach to every and the click submit with all fields empty, only the first comes up as invalid, not all of them as it your video. My looping off somewhere?

[@isbemorph]

This is because .every breaks after the first validateSingleFormGroup returns a falsey, thus what you describe is correct behavior. If we want all inputs to go red after submit is clicked, we can add extra line with .forEach before the return line at 3:17.

[@frankoviedo3117]

a question, do you upload the code to github?, it would be of great help, to learn a little more and analyze it, thanks

[@codewithbubb]

Hi Frank, yes the original code (for the form validation) is on GitHub. Give me a minute and I’ll add the changes in this video to the repo so you can see both 👍

[@codewithbubb]

And here's the GitHub repository: github.com/codebubb/javascript-form-validation-tutorial
The main code for the validation bit is on the `main` branch and there's another branch with the method (using a Promise) to submit the form on the `submission` branch.

[@raselchowdhury575]

Dear Sir, greetings of the day.
Well, I want to say something From Bangladesh.... I am problem sufferer above matter...can you help me update validation in my laptop by anydesk help...I am trouble!

[@codewithbubb]

Hi there, what problems were you having? Happy to give some feedback if you can share a link to your code.

[@vijanvlogs453]

Thanks sir solve it....

[@joedyer1989]

Hey, thanks for this! The 'blur' eventListener when i click around the form within the inputs, I keep getting 'Cannot read properties of null errors for hasAttribute and querySelector' now and again, on the input and label elements? Like, the inputs still validate and shows errors messages and they disappear when typed correctly, but I also see those null errors too! I'm a bit miffed!

[@codewithbubb]

Hey Joseph, sounds like you might have a querySelector or something a bit off? Can you share your code somewhere and i'll take a look. Also, the console errors should direct you to which specific line of code is failing so you might be able to track as to why those variables are null?

[@joedyer1989]

@@codewithbubb It's ok i sorted it - there was a hidden input for a honeypot, which was being picked up and firing the blur event :D thank you :)

[@joedyer1989]

@@codewithbubb Hey codebubb, I wondered if you had any approaches to adding and validating a group of radio buttons (which should be required) within this function/tutorial? I managed to do a checkbox, which is simpler as it's only 1 field - but the radio options have me stumped :D

[@codewithbubb]

Hey@@joedyer1989, yeah i'm not suprised as I've just looked and it's a bit of a nightmare with radios!
It's basically going to require a bit of custom code to check for radios and alter the validation behaviour a little for them.
One thing you could do is change the way the isValid function for required to look for the 'checked' property:
isValid: input => {
if (input.type === 'radio') {
return input.checked;
}
return input.value.trim() !== '';
},
github.com/codebubb/javascript-form-validation-tutorial/compare/joseph_dyer_radios_1#diff-ed3ee7e0beea2498ff3b8ca85973d122fc6fa3d585d62b5807ec034d0cf076b3R63
But there are some problems with this as you need to check all of the radios to see if any of them have been selected - a bit more of a wider scope which the isValid function just can't cope with as it doesn't know about the other inputs.
Here's a better solution I came up with: github.com/codebubb/javascript-form-validation-tutorial/compare/joseph_dyer_radios_2#diff-ed3ee7e0beea2498ff3b8ca85973d122fc6fa3d585d62b5807ec034d0cf076b3R82
It's a bit messy and would benefit from refactoring but it will give you a set of radio inputs that validate on the require attribute set at the 'formGroup' level and give you proper error labels/messages.
Give me a shout if it doesn't make sense!

[@joedyer1989]

@@codewithbubb Oh awesome, thanks for that - I'll see if i can implement it!