Figure 7.1 depicts an image showing the web form with only server-side validation in place. The form is submitted to the web server through an HTTP Post request. The server provides a fully rendered web page response. If the user did not fill out the form properly, errors will be populated and displayed in the web page response. If the user did fill out the form properly, a HTTP redirect will be made to the confirmation web page:

Figure 7.2 depicts an image showing the web form with both client-side and server-side validation in place. When the user submits the web form, the data in the form is validated using client-side validation. The form data will be submitted to the web server using an XHR call to a Rest API endpoint, only upon a successful client-side validation result. Once the form data has been submitted to the server, it will undergo a second round of server-side validation. This ensures the quality of the form data even in a scenario where the client-side validation may have been tampered with. The client-side application will inspect the form validation result returned from the server and will either display the confirmation page upon a successful form submission or will display the contact form errors, upon an unsuccessful form submission: