Chapter 5. Handling Form Input

In the previous chapter, we created a route handler to serve a sign up form. We also created the Selmer HTML template for this form, and as of now, it renders and looks pretty when we hit http://localhost:3000/signup. In this chapter, we're going to take it a bit further by:

• Creating an endpoint to which the form will POST

• Validating the form input

• Reporting any form validation errors back to the user

• Rendering a success template upon successful signup

Handling the form POST

There are typically three things we need to do when handling form input: validate the input, show an error message if the input is invalid, and show a success message when the input is valid and accepted.

In order for us to validate the form input, we need to create a route where the form will POST. We made a number of these in the previous chapter, so we'll draw on that experience and pattern.

Let's create a new route for the same URL, /signup, but this time we'll ensure that it accepts a POST request instead of a GET request. We'll put it along with the existing /signup GET route in our hipstr.routes.home namespace:

(defroutes home-routes
  (GET   "/"        []       (home-page))
  (GET   "/about"   []       (about-page))
  (GET   "/signup"  []       (signup-page))
  (POST  "/signup"  [& form] (str "nice job"))

We now have two routes for the same URL, one that will handle the GET request, and another that will handle the POST request. You'll notice that GET doesn...

Validating the form POST

We might write perfect code but, unfortunately, our users are mere mortals and thus are prone to giving us cruddy data by mistake. If you recall, in Chapter 1, Getting Started with Luminus, we used the Luminus template to generate the hipstr application, which includes the lib-noir library for us. One of the helper namespaces provided by lib-noir is a noir.validation namespace.

The noir.validation namespace

The noir.validation namespace provides methods to validate data in a variety of ways. It includes functions to check whether or not an input is nil, is an e-mail, is of a certain minimum length, and so on. This is excellent because I hate writing validation code, and I'm sure you do, too.

However, while noir.validation has a lot of functions that can be used to validate data, its actual validation framework makes some unfortunate assumptions as to how it will be used. It is also stateful, which makes it difficult to test and, frankly, is pretty unnecessary for a...

Summary

In this chapter, you learned how to accept and validate, submitted input from a user using Validateur. You also learned how to create reusable validators, thus reducing the amount of code you'd have to write in the future. Finally, we adjusted our signup.html template to use a new Selmer tag—the cycle tag—to loop through our errors and render each one out appropriately. However, we lived a little dangerously: we did some refactoring, but had no way of ensuring that what we refactored worked until we tested it in the browser. In the next chapter, we'll take a look at how we could have written some tests to validate this for us.