Check out a free preview of the full Organizing JavaScript Functionality course:
The "Using the Validation Module" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Now that Kyle has the shared data validation module written, he adds some input boxes that will need the validation. He also adds some client-side logic to handle incorrect min and max values.

Get Unlimited Access Now

Transcript from the "Using the Validation Module" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kyle Simpson: So now we wanna do that same kind of check and call logic in the about. But first, we need to give a way to specify those. So let's come to our template or our about grips template. And let's add in a couple of input boxes.
>> Kyle Simpson: So we got two input boxes that you need to be able to set some numbers into.

[00:01:01]
>> Kyle Simpson: So in our in init function, this call, this function's already starting to get long, so I'm going to re-factor by pulling that out.
>> Kyle Simpson: Somebody said Foo JS is wrong.
>> Kyle Simpson: Yep it does. Good catch. Thanks Vincent. [LAUGH] We would have found that eventually I'm sure. All right so I was pulling out that function and instead of using an inline function.

[00:01:30] I wanna make that it's own things cuz I'm gonna be adding stuff to it.
>> Kyle Simpson: Okay.
>> Kyle Simpson: Let's get our min and our max out.
>> Kyle Simpson: First step before we try to make the request is we want to do our validation, right? So I want to invoke that validate function.

[00:02:37] I wanna say if,
>> Kyle Simpson: Validate.checkMinMax.
>> Kyle Simpson: Question is, can I share all this code that I'm writing? Absolutely, we'll make this available as well. Okay.
>> Student: You're not passing in the actual values, you're passing in the [INAUDIBLE].
>> Kyle Simpson: You're right I need to call.
>> Kyle Simpson: All right so if I'm local then all I need to do is pass those locally but if I'm doing an API, I need jQuery to add that data on.

[00:03:31] So I'm going to set up this ajax call with my data is my object min, min and max max.
>> Kyle Simpson: And jQuery should take care of packaging up this data object as the GET parameters, sending that along to the API call. Of course which are server code that we've already written, will parse that out.

[00:04:14] If I'm not forgetting anything about JQuery at least that's how it should work. So we are using the exact same validate.checkMinMax rule set in both places. And the only difference is in code here is that in the DOM. We have to deal with DOM elements and on the server we're dealing with request URL parameters.

[00:04:35] So those parts we don't share. But the part the main meat of it, the validation rules are hidden away inside of our validate module and we're just going to share that thing in both places.
>> Student: Maybe minor, but if you're doing it locally, you want to check the min, max but if you're doing it remotely wouldn't you want the remote side to do the check?

[00:04:56]
>> Kyle Simpson: So that's actually a great point. That's a really good segue here. Most of the time, when people write apps, they actually want to invoke the data validation in the browser so that they can give an immediate response to the user without waiting for a roundtrip. So here we would want to validate first in the browser, even though we know the server is also going to validate.

[00:05:21] And the reason for that is, I'd rather pay the penalty of validating twice and letting the user get immediate feedback. If you didn't want that, if you literally just wanted the server to do it then there wouldn't be any need to run it here. You could just throw an Ajax request against it.

[00:05:37] But the difference then would be they'd get immediate errors in a local case and non immediate errors later.
>> Student: Yeah yeah I get that.
>> Kyle Simpson: So typically people do run data validation rules in the browser.
>> Student: Your example though isn't ever going to hit the remote side validation.

[00:05:56] Or it will just always be true.
>> Kyle Simpson: Except from the fact, if somebody tried to hijack my app and pass data. [CROSSTALK] That's why we have to. What's that?
>> Student: Are you gonna hijack your App.
>> Kyle Simpson: We can try. Right. I can create a get URL that tries it right.

[00:06:13] But the point is we have to validate it in both places. The server has to always validate cuz it can't trust that the browser did validate. We're validating in the browser so that we can give an immediate response. So if we didn't correctly pass the validation we do wanna give an immediate response to the user.

[00:06:33] So what I'm actually gonna do to give an immediate response is I'm gonna reuse my render answer just so I don't have to do any extra work here. I'm just gonna reuse my render answer.
>> Kyle Simpson: And I'm gonna render my error message directly in the same place that that random number gets thrown into.

[00:07:04]
>> Kyle Simpson: So a bunch of different work moving pieces. Hopefully all of these pieces, I'm not thinking of anything that I've done wrong but obviously there's a pretty good chance that something's broken. But let's just try it. Let's restart our server. We only restarting our server cuz we actually made changes to the server code.

[00:07:25] If everything that we changed was purely browser side. Or template related we don't need to restart the server at all. We just need to refresh the browser. Okay. So I'll be optimistic and close my console, uh-oh something failed. Probably a good sign that something's wrong with my.
>> Student: Look on your first [INAUDIBLE].

[00:07:51]
>> Kyle Simpson: Now I got a problem here. [INAUDIBLE] My first shell is my watch on my templates. But, this is why I have a server logs telling me that I got a problem. What problem is it giving me? Server line 188. I'm missing an parenthesis.
>> Kyle Simpson: Probably a good idea to check that server log before just assuming that things are working so I'm just gonna zero it out for now.

[00:08:31] And then when I restart my server, I'm just gonna watch the log.
>> Kyle Simpson: Okay, so I'm not getting any errors thrown, that's a better sign. Let's try to reload here. Okay, phew! That was an easy fix. All right, let's go to about. There's our input boxes. Now we have not entered anything in yet.

[00:09:00] And we know that these empty strings are gonna get end up getting treated as either zeroes or as nans depending on how that coercion ends up happening right. So if we pull out the value of an input box that ends up with an empty string. Which we know that on our number coercion inside of our validator, that's gonna end up coercing the empty string to zero and zero.

[00:09:27] So we went into it that we would expect if I just tried it just as is we'd expect a failure. So everybody following me. We'd expect to get an error message. So let's try it, didn't work so what did I miss? Validate is not defined. That's interesting. So it's not finding my validate module.

[00:09:48] Aah! [LAUGH] I forgot to load it.
>> Kyle Simpson: Let's try that again.
>> Kyle Simpson: We're assuming that we should get an error here. We didn't get an error, we got a zero. So let's do some debugging.