Go & Vanilla JS: Fullstack Without Frameworks

Client-Side Form Validation

Maximiliano Firtman
Independent Consultant
Go & Vanilla JS: Fullstack Without Frameworks

Lesson Description

The "Client-Side Form Validation" Lesson is part of the full, Go & Vanilla JS: Fullstack Without Frameworks course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano demonstrates implementing login functionality, with proper validation and error messages. Additionally, he tests registration, confirming the flow is working correctly by creating new user accounts.

Preview
Close

Transcript from the "Client-Side Form Validation" Lesson

[00:00:00]
>> Maximiliano Firtman: And log in, it's pretty similar. So I will also use my teacher rights to copy and paste and then work around it. You also have it in the Freadme in case you want to use it. And then I need to change, well, I don't have a name.

[00:00:19]
I don't have a confirmation here, so it's log in. Email, login, password, and then only maybe two validations for email and password. I don't have confirmation. And then I will go to API, dot login, no name, email and password and kind of the same thing.
>> Maximiliano Firtman: Right? So if I try to log in, then I type an email, a password, I try to log in, I click there, and nothing happens.

[00:00:49]
So we actually need to debug this. If we go to the HTML, we can see that on submit, we are calling app dot login. So the next step is to look into the app Js file. And the app js has a login property, so it should execute this.

[00:01:05]
But if you scroll down a little bit, we actually are keeping two logins. And the problem with JSON is that the second one is replacing the first one, so nothing is happening because of that. So be careful, and we need to remove that one. Instead of having two log ins.

[00:01:22]
So now I, if I save. Refresh. And try again. Any password I log in. And now [SOUND], something weird has happened. But it's trying to, first, it's trying to save me the password, okay? And then say, enter a password where at least seven characters. And then it moves somewhere else.

[00:01:42]
So what happened here? Something weird happened, okay? The thing is that if we follow the errors. Actually, we are showing an error at some point. And I'm not sure if you remember that show, an error. If we go to show an error. The sketch actually in this same file, it has a second argument go to home.

[00:02:03]
That is true by default.
>> Maximiliano Firtman: Maybe we can say false by default. So if you wanna go to the home explicitly say so, because it was showing me the error and then it was getting out, okay? So it was kind of weird. So one more time. Now, let's type at least seven characters, login and authentication fail.

[00:02:28]
So this is the server, okay? It's still going to the home, so let me see if I save this go to Home equals false. So it shouldn't go to Refresh. Sorry, wrong password. Authentication fail is not going to the home. So it's working now, okay? So it's not working.

[00:02:53]
Now, if I have a short password, log in. It's not short enough like this. There we are. Now I'm getting a client inside of our message. This is our JavaScript validation, okay? If I have a wrong email, so the email does not exist in the server, but the password is the right one.

[00:03:13]
I'm still getting authentication failed. We can make a better error message, okay? And if I do the right one, so the right email and the right password. I'm actually in. And by the way, my password manager say you should change your password because 123457, is easy to guess, okay?

[00:03:34]
It's okay, I know. I know. And by the way it's trying to save the password. The password manager, and also it went to forward slash account. That was what I expected, okay? It's still not working because I didn't create that page, but at least that works. Let's try registration to check that everything works.

[00:03:58]
So I will create a new test account with a new email. It's a new at test of Dev and the password. Well, let's try first, like a small password, something like that. So you can see they have two error messages at the same time, which is okay, because I was collecting error messages.

[00:04:19]
Like if I have a very short name, I'm collecting error messages, okay? Which works, my validation. So let's say new test account. That password don't match. We have already checked that. And the other password is really complicated. It's adminadmin, okay? This is really complicated. And if I register, it seems like it worked, because it went to account that it should say something.

[00:04:48]
And if I go to my database and refresh. Now, I have two users. So my flow is working, okay? Magic has happened.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now