ree-validate

VeeValidate is a library for React.js that allows you to validate input fields, and display errors.

This plugin is inspired by PHP Framework Laravel's validation.

$3

#### npm

``
npm install ree-validate --save
`

#### yarn
`
yarn add ree-validate
`

$3

install classnames for easily manage the classes
`
npm i -S classnames

import classnames from 'classnames'

`

Now create a new class and bind errors bag with state.

`
class Page extends Component {
constructor(props) {
super(props)

this.validator = new ReeValidate.Validator({
email: 'required|email',
password: 'required|min:3',
})

this.state = {
formData: {
email: '',
password: '',
},
errors: this.validator.errors,
}

this.onChange = this.onChange.bind(this)
this.validateAndSubmit = this.validateAndSubmit.bind(this)
}

onChange(e) {
const name = e.target.name
const value = e.target.value
const { errors } = this.validator

// reset errors for url field
errors.remove(name)

// update form data
this.setState({ formData: { ...this.state.formData, [name]: value } })

this.validator.validate(name, value)
.then(() => {
this.setState({ errors })
})
}

submit(formData) {
console.log(formData)
}

async validateAndSubmit(e) {
e.preventDefault()

const { formData } = this.state
const { errors } = this.validator

const valid = this.validator.validateAll(formData)

if (valid) {
this.submit(formData)
} else {
this.setState({ errors })
}
}

render() {
const { errors } = this.state

return (

`

$3

`
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReeValidate from 'ree-validate'
import fr from 'ree-validate/dist/locale/fr'
`

`
class Page extends Component {
static displayName = 'RegisterPage'
static propTypes = {
// validate props
}

constructor(props) {
super(props)

this.validator = new ReeValidate.Validator({
email: 'required|email',
password: 'required|min:6'
})

this.validator.localize('fr', fr)
}

render() {
// render component
}
}

export default Page
`

$3

You can also use the following hoc

note: it is not yet part of the package

`jsx harmony
import * as React from 'react'
import { Validator } from 'ree-validate'

export default function withValidator(Component, fields){
class withValidator extends React.Component{

validator = new Validator()

_isMounted = false

constructor(props: any) {
super(props)

this.attachRules(fields)

this.state = {
errors: this.validator.errors,
}
}

componentDidMount() {
this._isMounted = true
}

componentWillUnmount() {
this._isMounted = false
}

validateAll = async (data: any) => {
const { errors } = this.validator

for (let fieldName in data) {
if (data.hasOwnProperty(fieldName)) {
if (errors.has(fieldName)) {
errors.remove(fieldName)
}
}
}

const isValid = await this.validator.validateAll(data)

if (this._isMounted) {
this.setState({ errors })
}

return isValid
}
validateOne = async ({ name, value }: { name: string, value: any }) => {
const { errors } = this.validator

if (errors.has(name)) {
errors.remove(name)
}

const isValid = await this.validator.validate(name, value)

if (this._isMounted) {
this.setState({ errors })
}

return isValid
}

validate = (data: any, multi: boolean = true) => {
if (multi) {
return this.validateAll(data)
}
return this.validateOne(data)
}

clearErrors = (fieldName: ?string) => {
const { errors } = this.validator

if (fieldName) {
errors.remove(fieldName)
} else {
errors.clear()
}

if (this._isMounted) {
this.setState({ errors })
}
}

attachRules = (field: Field | Array) => {
if (isArray(field)) {
field.forEach((f: Field) => {
this.attachRules(f)
})
} else {
this.detachRules(field)

this.validator.attach(field)
}
}

detachRules = (field: Field | Array) => {
if (isArray(field)) {
field.forEach((f: Field) => {
this.detachRules(f)
})
} else {
if (this.validator.fields.find({ name: field.name })) {
this.validator.detach(field.name)
}
}
}

addErrors = (field: string, message: any) => {
const { errors } = this.validator

if (errors.has(field)) {
errors.remove(field)
}

errors.add(field, message)

if (this._isMounted) {
this.setState({ errors })
}
}

render() {
return validator={this.validator}
validate={this.validate}
attachRules={this.attachRules}
detachRules={this.detachRules}
errors={this.state.errors}
addErrors={this.addErrors}
clearErrors={this.clearErrors}/>
}
}

withValidator.displayName = withValidator_${Component.displayName || Component.name}

return withValidator
}

`

then use this hoc as following

`jsx harmony
class Page extends React.Component<*, State> {
static displayName = 'Login Page'

state = {
form: {
username: null,
password: null,
},
}

handleChange = async (name: string, value: any) => {
const isValid = await this.props.validateOne(name, value)

console.log(this.props.errors)
}

handleSubmit = async (evt) => {
evt.preventDefault()

const isValid = await this.props.validateAll(this.state.form)

console.log(this.props.errors)
}

render() {
console.log(this.props)
}
}

export default withValidator(Page, [
{
name: 'username',
rules: 'required',
alias: 'Username',
},
{
name: 'password',
rules: 'required',
alias: 'Password',
},
])
`

$3

ReeValidate comes with a bunch of validation rules out of the box and they are all localized and cover most validation needs:

`
after
alpha
alpha_dash
alpha_num
alpha_spaces
before
between
confirmed
credit_card
date_between
date_format
decimal
digits
dimensions
email
ext
image
included
integer
ip
is
is_not
length
max
max_value
mimes
min
min_value
excluded
numeric
regex
required
required_if
size
url
``

$3

This library uses ES6 Promises so be sure to provide a polyfill for it for the browsers that does not support it.

$3

$3