In the previous chapter, we focused on how we could have the server-side application handoff data to the client-side application to seamlessly maintain state while implementing the shopping cart feature. In Chapter 6, Isomorphic Handoff, we treated the server, as the single source of truth. The server dictated, to the client, what the current state of the shopping cart was. In this chapter, we are going to go beyond the simple user interactions that we have considered thus far and step into the realm of accepting user-generated data submitted through an isomorphic web form.
This signifies that now, the client has a voice, to dictate the user-generated data that should be stored on the server, within good reason of course (validation of user-submitted data). Using an isomorphic web form, validation logic can be shared across environments. The client-side application can chip in and inform the user that they've made a mistake prior to the form data being submitted to the server. The server-side application has the ultimate veto power because it will rerun the validation logic on the server side (where, ostensibly, the validation logic can't be tampered with) and process the user-generated data only upon a successful validation result.
Besides providing the ability to share validation logic and form structure, isomorphic web forms also provide a means to make forms more accessible. We must address accessibility concerns for web clients that may not have a JavaScript runtime or may have the JavaScript runtime disabled. To accomplish this goal, we will build an isomorphic web form for the contact section of IGWEB, with progressive enhancement in mind. This means that only after implementing form functionality to satisfy the bare-minimum, JavaScript-disabled web client scenario, we will proceed to implement the client-side form validation that runs directly within a JavaScript equipped web browser.
By the end of this chapter, we'll have a robust, isomorphic web form, implemented in a single language (Go), which will reuse common code across environments. Most importantly, the isomorphic web form will be accessible to the most stripped down web client running in a terminal window, and at the same time, accessible to the GUI-based web client with the latest JavaScript runtime.
In this chapter, we will cover the following topics:
- Understanding the form flow
- Designing the contact form
- Validating email address syntax
- The form interface
- Implementing the contact form
- The accessible contact form
- Client-side considerations
- Contact form Rest API Endpoint
- Checking the client-side validation