In the Safari web browser, we may disable JavaScript, by choosing the Disable JavaScript option in Safari's Develop menu:

Figure 7.13 shows what the contact form looks like in the Graphical User Interface (GUI)-based web browser:

We follow the same testing strategy that we performed on the Lynx web browser. We partially fill out the form and supply an invalid email address, as shown in Figure 7.14:

Upon hitting the Contact button, the error messages are displayed next to the fields with issues, as shown in Figure 7.15:

Upon submitting the contact form, note that we get errors pertaining to the improperly filled out fields. After correcting the errors, we are now ready to hit the Contact button to submit the form again, as shown in Figure 7.16:

Upon submitting the contact form, we get forwarded to the /contact-confirmation route, and we receive the confirmation message that the contact form has been filled out properly, as shown in Figure 7.17:

The server-side-based contact form that we have implemented will continue to function even with JavaScript enabled. You might be wondering why do we need to implement the contact form on the client-side? Couldn't we just solely use the server-side-based contact form and call it a day?

The answer boils down to providing the user with an enhanced user experience. By solely using the server-side contact form, we break the single page application architecture that the user is experiencing. The astute reader will recognize that it takes a full page reload to submit the form and resubmit the form if there were errors. The HTTP redirect to the /contact-confirmation route will also break the user experience because it will also cause a full page reload.

The following two objectives need to be fulfilled, in order to implement the contact form on the client-side:

• Provide a consistent, seamless single-page application experience
• Provide the ability to validate the contact form on the client-side

The first objective, providing a consistent, seamless single-page application experience, is easily done using the isomorphic template set to render content to the primary content area div container as we had shown in previous chapters.

The second objective, the ability to validate the contact form on the client side, is possible, since the web browser has JavaScript enabled. With this capability, we can validate the contact form on the client side itself. Consider the scenario, where we have a user, that keeps making mistakes while filling out the contact form. We can lessen the amount of unnecessary network calls that are made to the web server. Only after the user has gotten past the first round of validation (on the client-side), will the form be submitted over the network, to the web server, where it undergoes the final round of validation (on the server side).