Nope 🙅

This project was created by the awesome Bruno Vego - @bvego, and is currently maintained by @ftonato and the community.

A small, simple and fast JS validator. Like, wow thats fast. 🚀

Nope's API is ~~heavily inspired~~ stolen from Yup but Nope attempts to be much smaller and much faster. To achieve this Nope only allows for synchronous data validation which should cover most of the use cases.

Note: Nope is not a plug-and-play replacement for Yup, in some cases at least.

Instead of throwing errors Nope simply returns the error object and if there are no errors it returns undefined.

For more details on what's available in Nope, check out the documentation.

Typescript definitions included. ✨

• Getting started
• Usage with react-hook-form
• Usage with Formik

Getting started

To start using Nope simply do

yarn add nope-validator

or

npm install -S nope-validator

or (even), do you wanna to try it online?

// import the dependency on your app

// const Nope = require('nope-validator'); // or
// const { Nope } = require('nope-validator'); // or
import Nope from 'nope-validator';

// create a schema

const UserSchema = Nope.object().shape({
  name: Nope.string().atLeast(5, 'Please provide a longer name').atMost(255, 'Name is too long!'),
  email: Nope.string().email().required(),
  confirmEmail: Nope.string()
    .oneOf([Nope.ref('email')])
    .required(),
});

UserSchema.validate({
  name: 'John',
  email: '[email protected]',
  confirmEmail: '[email protected]',
}); // returns an error object { name: 'Please provide a longer name '};

UserSchema.validate({
  name: 'Jonathan Livingston',
  email: '[email protected]',
  confirmEmail: '[email protected]',
}); // returns undefined since there are no errors

Usage with react-hook-form

Huge thanks to the RHF team for making a resolver for nope, enabling you to use nope as a validator in your RHF-controlled forms.

import { nopeResolver } from '@hookform/resolvers/nope';
import { useForm } from 'react-hook-form';
import * as Nope from 'nope-validator';

const schema = Nope.object().shape({
  username: Nope.string().required(),
  password: Nope.string().required(),
});

function Component({ onSubmit }) {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({
    resolver: nopeResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} />
      {errors.username && <div>{errors.username.message}</div>}

      <input {...register('password')} />
      {errors.password && <div>{errors.password.message}</div>}

      <button type="submit">submit</button>
    </form>
  );
}

Usage with Formik

Instead of passing it through the validationSchema prop, you should call Nope's validate on the validate prop as shown in the example below.

import { Formik } from 'formik';
import * as Nope from 'nope-validator';

const schema = Nope.object().shape({
  username: Nope.string().required(),
  password: Nope.string().required(),
});

function Component({ onSubmit }) {
  return (
    <Formik
      initialValues={{ username: '', password: '' }}
      validate={(values) => schema.validate(values)}
      onSubmit={(values) => console.log('Submitted', values)}
    >
      {() => (
        <Form>
          <Field type="username" name="username" />
          <ErrorMessage name="username" component="div" />

          <Field type="password" name="password" />
          <ErrorMessage name="password" component="div" />

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

License

MIT