How to Advance Validate React form using Formik and Yup

Formik with Advanced Yup Validation - React Forms || Material UI.

In this video we will see how to advance validate React form using formik and yup. and also yup with regular expression or regexp .

GitHub URL of program: https://github.com/vikas62081/YT/tree/advanceFormValidation

#materialui #formik #yup #react 

How to Validate React form using Formik and Yup

Formik with Basic Yup Validation - React Forms || Material UI.

In this video we will see how to validate React form using formik and yup. Here we will handle the basic validation of Form.

GitHub URL of program: https://github.com/vikas62081/YT/tree/basicFormValidation

#materialui #formik #yup #react 

How to Validate Sign Up Page using Formik and Yup in React

Sign Up Form Validation Using Formik & Yup || Material UI || React.

In this video we will see how to validate sign up page using formik and yup in React and style library material UI. The sign up form we designed in part 2 .

GitHub URL of program: https://github.com/vikas62081/YT/tree/signupValidation

#materialui #formik #yup #react 

Next JS Registration Flow Completed with Formik and Yup Validation - 19

In this video, we are going to look at the complete code for the registration of the user. We will see how the integration works where a user is registering to the application and then gets an email to verify the email account.

Once the email link is clicked. the user is verified and redirected to the Dashboard.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #next #yup #formik #registration flow

Laravel with React using formik and Yup For Form and Validation - Next JS Setup For API 06

In this video, I am going to show you how I have set up the front end application using Next JS. I have a basic Login form using Bootstrap.

We will using Formik to create the form along with Yup for validation of form. We will also see how we can store the token coming from Laravel’s API in a cookie so that we can use that in future API calls.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #next #api #formik #yup #laravel

Validate your Node/Express.js REST API Calls with yup

When your Express API receives HTTP requests, how do you check whether the request is valid? Especially for POST and PUT requests, where you expect the request body to contain an entire object to process, how do you know whether it has the right fields and valid values?

In some of my early APIs, it seemed natural enough to either write my own validation code in my routes to check for fields and types, or to even have some code in the model layer that would check an object for various conditions before it got put into the database, for example. These solutions always wound up messy / unreliable / incomplete. This article shows you how to create custom Express middleware to validate HTTP request bodies using a cool validation library called yup I’ll also show an example of nested objects and conditional validation in yup schemas.

#nodejs #expressjs #programming #node #yup

Validate a form? Yup, I can do that.

Yup is a schema validation library. One would use it to add property validations that execute prior to form submission. It is also pretty easy to use, it’s just difficult to find concrete examples to model off of.

Because of this difficulty in finding good examples that showcase its syntax, I’ve compiled some common examples in Javascript.

Let’s start with something easy and build from there.

Schema Structure

First, you need to know the basic structure to use.

Sample: Structure of schema validation

Here are a couple of samples for different data types:

Sample: First name is required

Sample: Birth Date is required

Custom Error Message

You can customize the error message that is displayed on the form.

Sample: Custom error message for first name

Enforce Data Type

You can also enforce that the data entered in the field corresponds to a particular data type. You can specify a particular message to be displayed when the value entered is not a real date.

#programming #yup #javascript #front-end-development #web-development

Manage Multiple User Permissions with Yup and Formik

Usually, when creating a form on React, a common approach is to use Formik (a React library to build forms) and yup (a JavaScript schema builder for value parsing and validation). If you follow this approach, after some time coding you’ll end up having a Formik component that uses a Yup schema in order to validate form values when needed, and that’s cool!

But what about handling multiple users with different permissions using the same Form component? For example: some users should see some inputs and some others shouldn’t, or maybe all users should see all inputs but some inputs are optional/required to some of them.

I want to show you a solution that I use: a builder schema function. Also, I’m going to compare some other approaches: using yup .when() mixed function, and multiple schemas, but first let’s set a scenario…

The scenario

Imagine you are developing a piece of software for a car rental company and they want a feature that allows customers to know if their cars are allowed to get into the car rental system, so car owners can get a commission.

And let’s say that after the user uploads their car info to the system, employees from the company can edit or upload more info about the car.

So, for now we have 2 user types: publicUser and companyMechanic, and these users have different permissions to edit the car info on the form with basic inputs: color, year, motor type and motor serial number.

Table with user permissions:

+--------------+--------------------+-----------------+
|  Car model   |                    |                 |
|  attributes  |     publicUser     | companyMechanic |
+--------------+--------------------+-----------------+
| color        | required           | required        |
| year         | required           | required        |
| motor type   | notRequired        | required        |
| motor serial |                    |                 |
| number       | notRequired        | required        |
+--------------+--------------------+-----------------+

There are some approaches to take

const carSchema = yup.object().shape({
  color: yup.string(),
  year: yup.number(),
  motorType: yup.string(),
  motorSerialNumber: yup.string(),
});

#formik #react #development #yup #programming

Use Yup with Redux-form

I wanted to replace Joiand Redux-Form with [Yup](https://github.com/jquense/yup)and [Formik](https://github.com/jaredpalmer/formik), respectively. “Now why would you want to do that!?”, you might ask. Well let’s quickly go through the reasons for Yup and Formik.

Why Yup

1. Much lightweight than Joi.

And this is why ‘lightweight’ is important:

_tl;dr: less code = less parse/compile + less transfer + less to decompress _source

2. Easier to parse for error messages from returned error object.

3. Much flexible to customize error messages without string manipulation shenanigans.

4. Yup shares very much similar syntax and method names with Joi, making replacing Joi an easy task.

Why Formik

See “Why not Redux-Form?”

However, replacing redux-form with Formik was considered to me to be a heavier task than Joi with Yup, therefore here goes ‘your friendly’ medium article about it — the gist of making Yup plays well with redux-form.

First we create a validator function that will accepts our Yup schema later.

import { Schema } from 'yup';

const validator = <T>(schema: Schema<T>) => async formValues => {
  try {
    await schema.validate(formValues, { abortEarly: false })
    return {}
  } catch (errors) {
    return errors.inner.reduce(
      (errors, err) => ({
        ...errors,
        [err.path]: err.message
      }),
      {}
    )
  }
}

export default validator

#yup #redux-form-yup #react #redux-form #programming #redux