Our form submits a number to the Express app

which processes the request with middleware and returns a result.

But what happens if we give our app a word like four?

The parseFloat method converts text into the value NaN or not a number.

Submitting an empty form field also results in not a number.

Seeing NaN on the resulting page would probably confuse our users.

Instead of showing the user NaN,

let's throw an error when the user submits invalid data.

In our middleware, parseFloat produces the NaN value.

So let's validate the input right after this line.

We can check if the value is NaN by using the function isNaN.

If the value we pass in is not a number, the function returns true.

We'll add an if statement and

use isNaN and pass in num.

Inside, we'll create an error object.

And add a description string, Submitted value is not a number.

Then we can pass the error to next.

One little quirk of next we should talk about.

It doesn't actually close out the middleware function.

After it's called, the middleware continues to run.

And when next is called again down here, Express throws an error.

That kind of bug can be hard to trace.

So let's avoid that by adding return before next up here.

That will make sure the function ends right here.

Let's save this and check it out in the browser.

If we refresh, whoa!

We're getting an error before the form even renders.

Can you spot the problem?

I'll give you a hint.

It has to do with this value right here.

Pause the video and think about it for a moment if you want to.

Because we're not submitting a form with our GET request, this value,

the number property, is undefined.

And just as a little experiment, let's open up Chrome DevTools and

call parseFloat on undefined.

We get not a number.

That means our error will get thrown.

So at the top of this function,

let's say, if request.body.number is undefined.

Don't continue on.

Move on to the next middleware function.

That way, GET requests will render the form.

But when our form defines the number property in POST requests, the request

of the rest of this function will spring into action the way we want it to.

Testing in the browser, we see that our form renders now.

And if we enter a numeric value, we get the right answer.

And if we enter an invalid value like an empty string, our error is triggered.

This error is still not very user-friendly, but

it's give us a little practice with throwing an error with middleware.

You could take this further if you wanted and send the user something less scary.

But I'll let you work that out on your own.

Next, let's have a look at packaging up our middleware into a module and

making it configurable.