DEV Community: Chukwudi Elochukwu

VALIDATING REACT FORM WITHOUT A LIBRARY

Chukwudi Elochukwu — Wed, 28 Sep 2022 11:18:05 +0000

A form is a user interface element within a website or software application that allows you to enter and submit data. It contains one or more fields and an action button, such as Save or Submit. Forms are a vital part of an application. Many businesses use forms on their websites to get great benefits. It’s a great way to get responses and prompt people to engage with you. Form validation is a “technical process where a web-form checks if the information provided by a user is correct.” The form will either alert the user that they messed up and need to fix something to proceed, or the form will be validated and the user will be able to continue with their registration process.

In this article, we’ll discuss:

Installing and Setting up React app
Creating our form application
Form Value Inputs
Validating our form
Conclusion

Installing and Setting up React

The next step is to install our react before we create our form application. Note there are two ways we can use this library: NPM and CDN, but in this article, we will install the application using NPM.

Install the React application using the following command:

npx create-react-app my form

We have successfully installed our react application The next step is to create our form.

Creating our form application

In this section, we will build a simple registration application with a requirement of name, password, email, etc.

Go to your code editor and create an app.jsx file on the src folder, this should be easy to do.

Here is a basic code for form application.

import "./app.css"
const App = () => {
    return <div className="app">
        <form>
        </form>
    </div>
}

Now that we have seen the basic syntax of Form component, let’s create our form application.
You can choose to do this inside your app.jsx file but I will be creating a components folder and create a Form Input file.

import "./app.css"
import FormInput from "./components/FormInput";
const App = () => {
  const handleSubmit = (e)=>{
    e.preventDefault()
}
    return <div className="app">
        <form onSubmit={handleSubmit}>
            <FormInput placeholder="Username"/>
            <FormInput placeholder="Email"/>
            <FormInput placeholder="Full Name"/>
            <FormInput placeholder="Sth else"/>
            <button>Submit</button>
        </form>
    </div>;
};
export default App;


import "./formInput.css";
const FormInput = (props) => {
    return (
        <div className="formInput">
            <input placeholder={props.placeholder}/>
        </div>
    )
}
export default FormInput


input {
    padding: 15px;
    margin: 10px 0px;
}
.app {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

The code blocks above is a form input for the form we are creating, although basic styles were added to it. Below is an illustration of what our form looks like without validation.

In the output above, if we enter the wrong information, our data will be submitted successfully, but that is not what we want. Let’s look at how to validate our form, but first, let’s see some advantages of Form Validation.

Form value inputs

Reaching your values without rendering your component you can use the code block below;

const data = new FormData(e.target)
  console.log(Object.fromEntries(data.entries)

Most people are worried about rendering components, if you have states and you change them you should not worry about rendering, its the nature of react, you are changing something and it should be passed through the user screen immediately. We are going to change our code block above to use State.

const App = () => {
  const [username, setUsername] = useState("")

For the inputs; I will be creating a new object instead of username, I will be using values, below is the code block.

const App = () => {
  const [values, setValues] = useState({
    username: "",
    email: "",
    birthday: "",
    password: "",
    confirmPassword: "",
  });


            .formInput {
                display: flex;
                flex-direction: column;
                width: 350px;
            }           
            input {
                padding: 15px;
                margin: 10px 0px;
            }            
            label {
                font-size: 15px;
                color: gray;
            }           
            .app {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
            }           
            .app {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
                background: linear-gradient( rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3)), url("https://getflywheel.com/layout/wp-content/uploads/2020/11/best-agency-websites-scaled.jpg");
                background-size: cover;
                background-position: center;
            }       
            form {
                background-color: white;
                padding: 0px 20px;
                border-radius: 8px;
            }          
            h1 {
                color: rgb(12, 40, 112);
                text-align: center;
            }  
            button {
                width: 350px;
                height: 50px;
                padding: 10px;
                border: none;
                background-color: rgb(210, 72, 118);
                color: white;
                border-radius: 5px;
                font-weight: bold;
                font-size: 18px;
                cursor: pointer;
                margin-top: 12px;
                margin-bottom: 30px;
            }

The code block above is basically adding styles to our form.

Validating our form

There are more validation rules, but if you can’t find a rule that meets your demands, you can design your own validation rules, which is something special.
Here is a simple example

const inputs = [
     {
        id:1,
        name: "username",
        type: "text",
        placeholder: "Username",
        errorMessage:"Username should be 3-16 characters and shouldn't include any special character!",
        label: "Username",
        pattern: "^[A-Za-z0-9]{3,16}$",
        required: true,
     },
     {
        id:2,
        name: "Email",
        type: "Email",
        placeholder: "Email",
        errorMessage:"It should be a valid email address!",
        label: "Email",
        required: true,
     },
     {
        id:3,
        name: "birthday",
        type: "date",
        placeholder: "Birthday",
        label: "Birthday"
     },
     {
        id:4,
        name: "password",
        type: "text",
        placeholder: "Password",
        errorMessage:"Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!",
        label: "Password",
        pattern: `^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$`,
        required: true,
     },
     {
        id:5,
        name: "confirmPassword",
        type: "text",
        placeholder: "Confirm Password",
        errorMessage:"Passwords don't match!",
        label: "Confirm Password",
        pattern: values.password,
        required: true,

Let’s look at our error messages; First we go into our FormInput.jsx file and edit it to look like the image below;

            span {
                font-size: 12px;
                padding: 3px;
                color: red;
                display: none;
            }

Above is the css file for your error messages;
Now to implement your error messages there is an absolute attribute which is pattern; you can use strings or regex code, below is an example;

In cases where we want the password to match the confirm password we use the code block below;

onFocus={inputProps.name==="confirmPassword" && setFocused (true)}

Conclusion

Handling and validating forms in a large application can be hard work because each form component must be made from scratch, and validation rules must be made for each form component.
I hope this article has helped you learn how to properly handle validation for your forms without any library. We have also covered creating custom errors and customizing error messages.

Creating a navigation bar in react with Routing

Chukwudi Elochukwu — Wed, 28 Sep 2022 10:46:30 +0000

Routing is a process in which a user is directed to different pages based on their action or request. React router is used to define multiple routes in the application, when a user types a specific URL into the browser, and if this URL path matches any route inside the router file, the user will be redirected to that particular route. In this article, we will create a fully functional navigation bar react using a react router.

React Router Components

Let’s look at some of its major components:

Browser Router: Browser Router is a router implementation that uses the HTML5 history API(push State, replace State and the pop state event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components.
Routes: It’s a new component introduced in the v6 and a upgrade of the component. The main advantages of Routes over Switch are:
- Routes are chosen based on the best match instead of being traversed in order.
Route: Route is the conditionally shown component that renders some UI when its path matches the current URL.
Link: Link component is used to create links to different routes and implement navigation around the application. It works like HTML anchor tag.

The Project

In this project we made a fully functional navigation bar using a react router, below is what our project looks like:

Creating our React app

To set up our React app, open your terminal and run the following command below:

npx create-react-app my navbar

Navigation Bar HTML

Now that the React app has been created, go to your code editor and create an app.js, navbar.js, and index.js files on the src folder, this should be pretty easy to do.

Edit your Navbar.js to the image above, inside this navbar.js is where we are going to put all of our navigation code, we are going to want to have a nav element which I am going to give a class, so we have a nav class:

<nav className="nav"></nav>

Inside of the Navbar.js file we are still going to have a link that redirects us to our homepage, and we gave it a class so we can be able to style it specifically:

<a href="/" className="site-title">Site Name</a>

Navigation Bar CSS

Now when you run this in your terminal there are no styles attached to it in your browser, to design this your own style; Go to your src/index.js directory and import “./style.css”. Below is what your code ought to look like:

And then we go to our src directory and create a syles.css file where we are going to input all of our css styles just as seen below:

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.container {
    margin: 1rem;
    text-align: center;
}
.nav {
    background-color: #333;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2rem;
    padding: 0 1rem;
}
.site-title {
    font-size: 2rem;
}
.nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 1rem;
}
.nav a {
    color: inherit;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    padding: .25rem;
}
.nav li.active {
    background-color: #555;
}
.nav li:hover {
    background-color: #777;
}

We set some global styles, normalized our CSS, and even set it to our preference, it should be looking like the image below:

Creating our pages

Now that we have our navigation bar, we want to create some pages and these pages are going to have the text of home, pricing and about as seen in the image above, so there is going to be separate components that contains all of our code for that page. To create this, go to your src directory and create a folder called pages, inside of it you create the Home.js, Pricing.js and About.js files, edit your files to look like the image below:

All this is going to redo is return an h1 with a text HOME inside of it, really straightforward. Now we do same for our About and Pricing pages, after this we import the pages created, into our src/app.js directory, it should look like this:

Installing our React Router library

Using a react router to make our project more efficient, so the user can be redirected properly when clicking on pricing, home or about. Now you have to install the react router library, to get started, the first thing we need to do is to go to terminal and type the code below.

 npm i react-router-dom

The library being downloaded is specifically for the doms. It is going to download all the libraries that we need for react router, to confirm that it has been downloaded, go into your package.json file, you will see

react - router - dom : 6 . 3 . 0

being installed.

Routing with React Router

To use react router, there’s a few things that you need to set up, first of all you need to set up what type of router you are using and then you need to define all your different routes. Go to your index page and import a browser router by using this code block below.

import {Browser Router} from "react-router-dom"

React router allows you to do routing for mobile applications and so on, but for us we are creating a web application in a browser so we are going to be doing a browser router. Now wrap your entire application inside the Browser Router, which looks like this image below, because our entire component is going to be using this one single router to manage all of our routing.

Now we need to define that router and all the different routes inside of it, to do that we go into our src/App.js file and import route, routes components, using this code block below:

import { Route, Routes } from "react-router-dom"

this two components allows us to define all of our routes and group them together.

Defining our Routes components

The image above shows where our routes components wraps all of our individual routes and this routes components essentially just says “Hey, here is a list of different routes, choose the one that fits best”, so we are going to define all of this routes as there own routes components, and each of them has a path and also an element and what it is rendering out.

Modifying the Rest of our Project

Inside of our Navbar.js file we are using normal anchor tags which we need to replace with a Link component that is from react router, to do that go to the top of your Navbar.js file and import the Link component from react router dom, use the code block below to do that:

import { Link } from "react-router-dom"

And also replace all anchor tags with a Link but what is really important is instead of using “href” we are replacing it with “to” and it is going to work exactly the same, we have a “usedMatch” hook and also a “usedResolvedPath”.
The “usedMatch” allows us to compare essentially the current path that we are on to what ever path we want. “usedResolvedPath” allows you to take a relative or absolute path, combines it with the current path you are on and gives you the actual full path that you will be accessing.
And then we determined if it is active by using the “useMatch” class and we pass an object and with the object we passed a path which is our pathname for our resolved path and then we passed an end of true, by saying “end:true” we are just saying that the entire path must match because with react router you can actually do a partial matching but in our case we want to make sure that the entire URL is exactly the same, we do not want to worry about partial matching.

Conclusion

In this article, we created a functional navigation bar using react router hooks and components and also learnt how to import a react router library.