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:
;; @Validation Component validationSchema = Joiobject; state = {}; { this; }; { this; }; { this; }; { this; }; { e; }; { return <form> <div className=this> <label className='control-label'>Name</label> <input type='text' className='form-control' value=thisstatename onChange=thishandleNameChange/> this </div> <div className=this> <label className='control-label'>Email</label> <input type='text' className='form-control' value=thisstateemail onChange=thishandleEmailChange/> this </div> <div className=this> <label className='control-label'>Password</label> <input type='password' className='form-control' value=thisstatepassword onChange=thishandlePasswordChange/> this </div> <div className=this> <label className='control-label'>Verify Password</label> <input type='password' className='form-control' value=thisstateverifyPassword onChange=thishandleVerifyPasswordChange/> this </div> <button className='btn btn-primary' onClick=thishandleSubmit disabled=!this || !this>Submit </button> <hr/> <h3>State:</h3> <pre>JSON</pre> </form> ; } ;
Without decorator:
//...var Component = React; moduleexports = ;
UMD
//ES2015const Validation Joi = windowReactValidationDecorator;// Orvar Validation = windowReactValidationDecoratorValidation;var Joi = windowReactValidationDecoratorJoi;
Example here
API
validationSchema
- is Joi schema.
- can be defined as
joi object
orfunction
.
// Defined as joi objectvalidationSchema = Joiobject; // Defined as function { return Joiobject;};
validationValue
- is validation value.
- it is optional, default
validationValue
usestate
as value.
// Defined as object { return ; // Sample};
validationOptions
- is Joi options.
- can be defined as
object
orfunction
.
// Defined as objectvalidationOptions = convert: false; // Defined as function { return convert: false ;}
validate(path, [callback])
- Validates
validationValue
using the givenvalidationSchema
. - After it called
isDirty(path)
will returntrue
.
{ this;};
handleValidation(path)
isValid([path])
this;// return true if field name valid other while return false. this;// return true if all fields in schema valid other while return false.
isDirty([path])
this;// return true if field name dirty other while return false. this;// 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// 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// 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
See object-path.
Troubleshooting
Cannot resolve module 'net' or 'dns':
// webpack.config.js//...moduleexports = //...node: net: 'mock' dns: 'mock'//...;//...