DEV Community: Deepak Sharma

React Form validations using Formik

Deepak Sharma — Mon, 08 Jun 2020 02:48:55 +0000

Form validations is one of the biggest worries of any frontend developer and no one likes to handle the boilerplate or utils when an elegant solution already exists.

In this article, we'll learn how to use Formik to build a robust form quickly.

We'll be using create-react-app project with following additional dependencies to setup quickly:

yarn add formik yup react-bootstrap bootstrap

There are 3 ways that formik can be used in a project:

useFormik react hook
<Formik /> render props component
withFormik() higher order component

Formik recommends against using the useFormik react hook (ref)

So, we're left with options 2 & 3.

In this post, we'll create a form using <Formik /> render props component.

Link to full source code: https://codesandbox.io/s/github/dpkshrma/formik_react_starter

First, let us setup our form by directly using components from react-bootstrap:

// SignupForm.js

import { Form, Button } from 'react-bootstrap';

const SignupForm = () => {
  return (
    <Form noValidate onSubmit={handleSubmit}>
      <Form.Group>
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          name="name"
          placeholder="Please enter your name"
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Email</Form.Label>
        <Form.Control
          type="email"
          name="email"
          placeholder="Please enter your email address"
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Password</Form.Label>
        <Form.Control
          type="password"
          name="password"
          placeholder="Please enter a strong password"
        />
      </Form.Group>
    </Form>
  )  
}

export default SignupForm;

Now, let us wrap it inside <Formik /> to access all the validation helper functions & state it provides:

import { Formik } from 'formik';

const SignupForm = () => {
  const onSuccess = (values) => {
    alert('All entries are valid' + JSON.stringify(values));
  };
  return (
    <Formik
      onSubmit={onSuccess}
      initialValues={{
        name: '',
        password: '',
        email: ''
      }}
    >
      {({
        handleSubmit,
        handleChange,
        values,
        touched,
        errors,
      }) => {
        return (
          <Form noValidate onSubmit={handleSubmit}>
            <Form.Control
              type="text"
              name="name"
              placeholder="Please enter your name"
              value={values.name}
              onChange={handleChange}
              isInvalid={errors.name}
            />
            <Form.Control.Feedback type="invalid">
              {errors.name}
            </Form.Control.Feedback>
            {/* ... */}
          </Form>
        );
      }}
    </Formik>
  );
}

As you can see, <Formik /> allows us to set initial state of the form using initialValues prop, and handle the submitted values after validation.

Following the render props technique, <Formik /> accepts a function as its child and provides a whole range of helper functions & state variables in function arguments. Some of them are:

handleSubmit allows you to automatically handle all the html & custom validations on form submit
handleChange can be used with onChange prop of all types of inputs and automatically updates the values correctly after validation (validation on change can be made optional)
values object contains the dynamically updated input values. - errors object contains validation errors The key in each key-value pair of values and errors objects come from the name attribute of the input form component.

Now, this is all well and good. We've covered html based validations, but what about custom validation requirements?
<Formik /> has got you covered for this! You can provide custom form validation rules in the validationSchema prop.

We'll use yup to create validation schema. You can use joi as well if you prefer. Below example illustrate how to use the same:

const schema = yup.object({
  name: yup.string().required(),
  password: yup.string()
    .matches(/^(?=.*?[A-Za-z])(?=.*?[0-9]).{8,32}$/, invalidPwdMsg)
    .required(),
  email: yup.string().email('A valid email is required').required(),
});

const SignupForm = () => {
  return (
    <Formik
      validationSchema={schema}
      onSubmit={onSuccess}
    >
      {/* ... */}
    </Formik>
  );
}

yup syntax is very similar to joi. It integrates very well with Formik, and has in built functions to check for email, regex etc. as shown above.

That's all for now! :)
You just learned how to quickly get started and build awesome forms with Formik in React.

Hit the like button if you like this post & follow me if you'd like to read more short tutorials like this.

Learn Javascript Class Decorators in 5 minutes

Deepak Sharma — Fri, 05 Jun 2020 21:20:34 +0000

As of today, class decorators are not natively supported in the latest NodeJs environment - v14.3.0 (status on node.green), which is why babel is required to use this feature.

To enable class decorators, babel plugin @babel/plugin-proposal-decorators can be setup like below:

// .babelrc.json
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-decorators",
  ]
}

And make sure to add a build script to transpile all your ES6 Javascript source code (src/) to ES5 code (dist/) in your package.json:

  "scripts": {
    "build": "babel src/**/*.js -d dist"
  }

A class constructor decorator is used like this:

@Decorator
class MyClass {
}

As the name suggests, a constructor decorator allows to access the class being wrapped and the arguments received by its constructor. It is just a function which looks like below:

function Decorator(target) { // target is basically "Class" in this case
  // do something with target...
};

A method decorator is used like so:

class MyClass {
  @Decorator
  doSomething() {
    // do something amazing here..
  }
}

A class method decorator looks like this:

function Decorator(target, key, descriptor) {
  // target refers to the Class
  // key is class method name
  // descriptor contains the object created by Object.defineProperty representing this method
}

Now, usage possibilities are endless, but as an example, let us create a decorator that logs the input arguments for a class constructor and class method.

function logArgs(target, key, descriptor) {
  if (!key) { // it means it is applied on a class
    return WrapperClass extends target {
      constructor(...args) {
        console.log('constructor arguments :', args);
        super(...args);
      }
    }
  } else {
    // ...
  }
}

As you can see, this decorator, will check if it is applied to a class, return a wrapper class that extends the class being decorated and log its arguments. Simple!

function logArgs(target, key, descriptor) {
  if (!key) { // it means it is applied on a class
    // ...
  } else {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
      console.log('method arguments :', args);
      const result = original.apply(this, args);
      return result;
    }
    return descriptor;
  }
}

Accessing args in class method decorator is a little trickier than class decorator. As mentioned above, descriptor is an object which represents this method. So, we can override its value, in order to access its args. And once that is done, return this updated descriptor.
In this override method, we call .apply function on original class to make sure that this is available to the class method and return the result.

That's all for now! :)
You just learned how to quickly get started and build awesome things with JS class decorators.

Hit the like button if you like this post & follow me if you'd like to read more short tutorials like this.