JavaScript Form Validation

Learn how to validate form inputs with JavaScript. In this tutorial you gonna see how to create simple JS custom validations!
-----------------------------
You may also like:
⌨️ Responsive Sidebar Manu:
• Responsive Sidebar men...
📲 Responsive Registration Form
• Responsive Registratio...
📊 Responsive Navigation Bar
• Responsive Navigation ...
📱 Transparent Login Form
• Transparent Login Form...
📜 Login Form With Only HTML & CSS
• Login Form using HTML ...
Source code can be found here: github.com/Gvi...

[@oritsegbemi]

for over 4 hours I've been struggling with a long code. thank you so much.

[@CodeWithGvidas8534]

You are welcome ;)

[@missulu]

Only 4 hours? Not a programmer are you!lol!

[@ayikoandrew4680]

Thank you so much for this work sir.

[@CodeWithGvidas8534]

Thank you for watching Ayiko 🙂

[@seppneimusser5723]

Wow°° Thank you for your tutorial and help!

[@CodeWithGvidas8534]

Thank you for watching and finding it helpful! :)

[@rakeshmuthyala4229]

Nice videos. Really helpful

[@CodeWithGvidas8534]

Thanks! Thanks for watching!

[@shareefzada2106]

can you tell me as a beginner how much JavaScript i should learn?
for example i do know about addEventListener, but here the syntax is a bit different
Hope you understood my question

[@CodeWithGvidas8534]

As a beginner, you should focus on learning the basics of JavaScript syntax, including variables, data types, control structures, functions, and objects. Once you have a solid understanding of these fundamentals, you can start learning more advanced topics like DOM manipulation, AJAX, and frameworks like React or Angular. Don't be afraid to experiment and practice coding on your own. Building small projects and tinkering with code is one of the best ways to learn and improve your skills as a JavaScript developer.

[@shareefzada2106]

@@CodeWithGvidas8534 Thank you man..!
means a lot

[@deleajayii]

Thanks for the video, but how do I validate for "email" field?

[@m.j.mcintear793]

how to call the function with each of these variables as an argument emailaddress variable and emailconfirm variables
Do you know how to make two of the same emails need to match and is that client side validation or server side? Inquiry of js on html form

[@CodeWithGvidas8534]

First of all you need to create two more input fields, lets say with id's "email" and the other - "emailConfirm".
Then you need to add two constants in script.js file:
const email= document.getElementById("email");
const emailConfirm= document.getElementById("emailConfirm");
And finally add additional check in submit eventListener function:
if(email.value.trim() !== emailConfirm.value.trim()){
errors.push("Wrong email")
}
This is front-end(client side) validation.
If you want to learn more about front-end and the back-end you can watch my video: ruclips.net/video/eRD3Bgk0iEk/видео.html

[@aribakhan7322]

can you tell me how to add regex here? I added, but it didn't work, I don't know not why. It worked first then don't work any more

[@CodeWithGvidas8534]

Hi, it is difficult to say without seeing your code, but one of the ways to implement regex check would be:
const form = document.querySelector("#form");
const input = document.querySelector("#phone");
const output = document.querySelector("#output");
const re = /^(?:\d{3}|\(\d{3}\))([-/.])\d{3}\1\d{4}$/;
function testInfo(phoneInput) {
const ok = re.exec(phoneInput.value);
output.textContent = ok
? `Thanks, your phone number is ${ok[0]}`
: `${phoneInput.value} isn't a phone number with area code!`;
}
form.addEventListener("submit", (event) => {
event.preventDefault();
testInfo(input);
});

[@nrazuke]

how do you change the push message color??

[@CodeWithGvidas8534]

In this tutorial for the messages element is used, which is styled in stylesheet

[@nrazuke]

@@CodeWithGvidas8534 thanks!

[@edwinchigozie215]

Bro source code, damn

[@CodeWithGvidas8534]

github.com/GvidasGVD/jsFormValidation

[@fiddletomiko]

I have this problem
crbug/1173575, non-JS module files deprecated, instead showing of these error it goes directly to my files

[@CodeWithGvidas8534]

I highly suggest you to google the error and try to find the solution to this error. Also you could try (if you are using chrome) go into the Network tab of the Chrome Developer Console and make sure that the connection is on No throttling and not Offline.