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
To start using Nope simply do
yarn add nope-validatoror
npm install -S nope-validatoror (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 errorsUsage 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>
);
}Contribute
Information describing how to contribute can be found here