How to use React with Yup Validation (Without Formik)

Question

Any idea how can I do a React input validation using Yup (without Formik)?

I couldn't find online any good example. Thanks

Answer 1

You can use cast() if u want to use yup without formik, see example :

let yup = require('yup');

let schema = yup.object().shape({
  name: yup.string().required(),
  age: yup
    .number()
    .required()
    .positive()
    .integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(function() {
    return new Date();
  }),
});

// check validity
schema
  .isValid({
    name: 'jimmy',
    age: 24,
  })
  .then(function(valid) {
    valid; // => true
  });

// you can try and type cast objects to the defined schema
schema.cast({
  name: 'jimmy',
  age: '24',
  createdOn: '2014-09-23T19:25:25Z',
});
// => { name: 'jimmy', age: 24, createdOn: Date }

Answer 2

Formik handles forms in react, binding the input tags to a model, that model can contain validators which can be Yum or any other form of validation.

If you don't want to use Formik then you can use another Form handling library for react such as FormState.

If you don't want to use a form handling library at all then you have to do it all by hand.