Reactive Form Validation

This post will discuss how form validation was implemented within the NextJs application.

In order to achieve this a custom hook was created named useForm. Three interfaces were created and are required to use the hook. Each form requires a validation schema, an initial state made consisting of subfields.

This hook can be used for any standard inputs such as text inputs and text areas.

useForm Hook In Full

The following extract shows the hook in full. Form input values entered by the user are checked against a regular expression when new characters are typed. If the text does pass the RegExp.test( ) method then the error contained within the validation schema for the given input is used in the form state. This change in state updates the user interface to display the error to the user notifying them of a problem.

Example Usage

Using the hook is an easy process. Before using the fields for the form inputs must be defined and given a validation schema. In the following image the form will have a title, excerpt and content field. Each field has their own unique regular expression that their value will be tested against.

Once the validation schema has been configured the form can be created.

The results of the real time form validation can be seen in the following screenshot. The title field is a required field, however is missing a value and so will provide an error telling the user that it is a required field. The excerpt field has an illegal character and so will notify the user of this. Finally, the content input contains no errors and so does not provide an error or highlight the input as red.

This post has covered how the NextJs application provides form validation to users in real time by using a custom created React Hook that uses callback functions, internal state and regular expressions. The same hook was used for the login page and the search page.

Comments

Post a Comment

Popular posts from this blog

WordPress Modifying A Child Theme & Using The OpenWeatherMap API

Image
The modification of a WordPress child theme can be accomplished in multiple stages. For my child theme modification users can search the name of a city and are provided some current weather data from openweathermap. To accomplish this I used TypeScript to make my requests and perform DOM manipulation. Child Theme Creation & OpenWeatherMap API To create a child them, navigate to the directory where WordPress themes are stored. Create a new directory that uses a similar name to the parent them you wish to extend, however append the text "-child" to the end. This text does not do anything, however this is considered best practice (WordPress, n.d.). This directory requires several files in order to be operational. Firstly, a CSS file that contains a description of the theme is required. This should be named style.css and contain text similar to the following extract. The child theme will now be available for activation thro...
Read more

Creating A WordPress Post Using The REST API

Image
The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to  /wp/v2/posts  using the schema defined on the WordPress developer website(WordPress, n.d.). A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session.  The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by  accessing this blog entry. Creating The Posts Content Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image. Each form input on this page uses the useForm form validation hook that was created for performing real time, reactiv...
Read more

Consuming The WordPress Posts Via The REST API

Image
WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.). Fetching & Server Side Rendering As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered.  A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below. To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has alrea...
Read more