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...

[VitoOnYoutube]

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

[tuckerhoog]

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

[raselchowdhury]

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!

[BMikel]

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

[joedyer]

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!

[frankoviedo]

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

[justnoone]

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!

[kjones-bouton]

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?

[BMikel]

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