react-validation-decorator
v0.4.0
Published
Validation decorator for ReactJS base on joi.
Downloads
509
Readme
React Validation Decorator
Validation decorator for ReactJS base on joi.
Installation
NPM
npm install --save react-validation-decorator
Bower
bower install --save react-validation-decorator
Usage
With decorator:
import React from 'react';
import {Validation, Joi} from 'react-validation-decorator';
@Validation
class Component extends React.Component {
validationSchema = Joi.object().keys({
name: Joi.string().required().label('Name'),
email: Joi.string().email().required().label('Email').label('Email'),
password: Joi.string().min(3).max(30).label('Password'),
verifyPassword: Joi.string().valid(Joi.ref('password')).options({
language: {
any: {
allowOnly: 'don\'t match'
}
}
}).required().label('Verify Password')
});
state = {};
handleNameChange = (e) => {
this.setState({
name: e.target.value
}, () => {
this.validate('name');
});
};
handleEmailChange = (e) => {
this.setState({
email: e.target.value
}, () => {
this.validate('email');
});
};
handlePasswordChange = (e) => {
this.setState({
password: e.target.value
}, () => {
this.validate('password');
});
};
handleVerifyPasswordChange = (e) => {
this.setState({
verifyPassword: e.target.value
}, () => {
this.validate('verifyPassword');
});
};
handleSubmit = (e) => {
e.preventDefault();
};
render() {
return (
<form>
<div className={this.getValidationClassName('name')}>
<label className='control-label'>Name</label>
<input type='text' className='form-control'
value={this.state.name}
onChange={this.handleNameChange}/>
{this.renderValidationMessages('name')}
</div>
<div className={this.getValidationClassName('email')}>
<label className='control-label'>Email</label>
<input type='text' className='form-control'
value={this.state.email}
onChange={this.handleEmailChange}/>
{this.renderValidationMessages('email')}
</div>
<div className={this.getValidationClassName('password')}>
<label className='control-label'>Password</label>
<input type='password' className='form-control'
value={this.state.password}
onChange={this.handlePasswordChange}/>
{this.renderValidationMessages('password')}
</div>
<div className={this.getValidationClassName('verifyPassword')}>
<label className='control-label'>Verify Password</label>
<input type='password' className='form-control'
value={this.state.verifyPassword}
onChange={this.handleVerifyPasswordChange}/>
{this.renderValidationMessages('verifyPassword')}
</div>
<button className='btn btn-primary' onClick={this.handleSubmit}
disabled={!this.isDirty() || !this.isValid()}>Submit
</button>
<hr/>
<h3>State:</h3>
<pre>{JSON.stringify(this.state, undefined, 4)}</pre>
</form>
);
}
}
export default Component;
Without decorator:
//...
var Component = React.createClass({
//...
validationSchema: Joi.object().keys({
name: Joi.string().required().label('Name'),
email: Joi.string().email().required().label('Email').label('Email'),
password: Joi.string().min(3).max(30).label('Password'),
verifyPassword: Joi.string().valid(Joi.ref('password')).options({
language: {
any: {
allowOnly: 'don\'t match'
}
}
}).required().label('Verify Password')
}),
getInitialState: function () {
return {};
},
//...
});
module.exports = Validation(Component);
UMD
<script src="path/to/react-validation-decorator/dist/react-validation-decorator.js"></script>
//ES2015
const {Validation, Joi} = window.ReactValidationDecorator;
// Or
var Validation = window.ReactValidationDecorator.Validation;
var Joi = window.ReactValidationDecorator.Joi;
Example here
API
validationSchema
- is Joi schema.
- can be defined as
joi object
orfunction
.
// Defined as joi object
validationSchema = Joi.object().keys({
name: Joi.string().required().label('Name'),
email: Joi.string().email().required().label('Email').label('Email'),
password: Joi.string().min(3).max(30).label('Password'),
verifyPassword: Joi.string().valid(Joi.ref('password')).options({
language: {
any: {
allowOnly: 'don\'t match'
}
}
}).required().label('Verify Password')
});
// Defined as function
validationSchema = () => {
return Joi.object().keys({
name: Joi.string().required().label('Name'),
email: Joi.string().email().required().label('Email').label('Email'),
password: Joi.string().min(3).max(30).label('Password'),
verifyPassword: Joi.string().valid(Joi.ref('password')).options({
language: {
any: {
allowOnly: 'don\'t match'
}
}
}).required().label('Verify Password')
});
};
validationValue
- is validation value.
- it is optional, default
validationValue
usestate
as value.
// Defined as object
validationValue = () => {
return Merge(this.state, this.props); // Sample
};
validationOptions
- is Joi options.
- can be defined as
object
orfunction
.
// Defined as object
validationOptions = {
convert: false
};
// Defined as function
validationOptions = () => {
return {
convert: false
};
}
validate(path, [callback])
- Validates
validationValue
using the givenvalidationSchema
. - After it called
isDirty(path)
will returntrue
.
handleNameChange = (e) => {
this.setState({
name: e.target.value
}, () => {
this.validate('name');
});
};
handleValidation(path)
isValid([path])
this.isValid('name');
// return true if field name valid other while return false.
this.isValid();
// return true if all fields in schema valid other while return false.
isDirty([path])
this.isDirty('name');
// return true if field name dirty other while return false.
this.isDirty();
// return true if any field in schema valid other while return false.
getValidationMessages([path])
If path
is defined return error details of path
other while return all error details.
getValidationValue()
Return validated value.
resetValidation([callback])
Reset validation.
getValidationClassName(path, [successClass, errorClass, defaultClass])
this.getValidationClassName('name')
// default return: `form-group`
// when name dirty and valid return : `form-group has-success`.
// when name dirty and invalid return: `form-group has-error`
this.getValidationClassName('name', 'valid', 'invalid', 'field')
// default return: `field`
// when name dirty and valid return : `field valid`.
// when name dirty and invalid return: `field invalid`
renderValidationMessages(path, [className='help-block', onlyFirst=true])
Render validation messages, if onlyFirst == false
it will render all messages of path
.
updateState(newState, [callback])
//...
state = {
user: {
name: 'John',
age: 30
}
};
//...
this.updateState({
'user.name': 'John smith'
})
See object-path.
Troubleshooting
Cannot resolve module 'net' or 'dns':
// webpack.config.js
//...
module.exports = {
//...
node: {
net: 'mock',
dns: 'mock'
}
//...
};
//...