Basic Example
ES6 Classes (uncontrolled form)
import {Component, PropTypes, findDOMNode} from 'react';
import Joi from 'joi';
import validation from 'react-validation-mixin';
import strategy from 'joi-validation-strategy';
import classnames from 'classnames';
class UserLogin extends Component {
constructor(props) {
super(props);
this.validatorTypes = {
username: Joi.string().alphanum().min(3).max(30).required().label('Username'),
password: Joi.string().regex(/[a-zA-Z0-9]{3,30}/).label('Password')
};
this.getValidatorData = this.getValidatorData.bind(this);
this.renderHelpText = this.renderHelpText.bind(this);
this.getClasses = this.getClasses.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
getValidatorData() {
return {
username: findDOMNode(this.refs.username).value,
password: findDOMNode(this.refs.password).value
};
}
render() {
return (
<form onSubmit={this.onSubmit}>
<div className={this.getClasses('username')}>
<label htmlFor='username'>Username</label>
<input
ref='username'
type='text'
className='form-control'
placeholder='Username'
onBlur={this.props.handleValidation('username')}
/>
{this.renderHelpText(this.props.getValidationMessages('username'))}
</div>
<div className={this.getClasses('password')}>
<label htmlFor='password'>Password</label>
<input
ref='password'
type='password'
className='form-control'
placeholder='Password'
onBlur={this.props.handleValidation('password')}
/>
{this.renderHelpText(this.props.getValidationMessages('password'))}
</div>
</form>
);
}
renderHelpText(message) {
return (
<span className='help-block'>{message}</span>
);
}
getClasses(field) {
return classnames({
'form-group': true,
'has-error': !this.props.isValid(field)
});
}
onSubmit(event) {
event.preventDefault();
const onValidate = (error) => {
if (error) {
//form has errors; do not submit
} else {
//no errors; submit form
}
};
this.props.validate(onValidate);
}
}
UserLogin.propTypes = {
errors: PropTypes.object,
validate: PropTypes.func,
isValid: PropTypes.func,
handleValidation: PropTypes.func,
getValidationMessages: PropTypes.func,
clearValidations: PropTypes.func,
};
module.exports = validation(strategy)(UserLogin);