MobX
Form validation forTaken strong inspiration from: react-bootstrap-validation, but mobx-input
depends just on validator.js(18kb minified). React, MobX and mobx-react
are peerDependencies, assuming you are already using those anyway.
Installation:
npm install mobx-input --save
Usage - Example Form:
Component { const result = if resultvalid thispropscontroller } { const appState controller = thisprops const job = appStatecurrentJob return <div className='container'> <ValidatedInput type='text' label='First Name' name='firstName' validate='required' model=controllerformData errorHelp= required: 'First Name is required' /> <ValidatedInput type='text' label='Last Name' name='lastName' validate='required' model=controllerformData errorHelp= required: 'Last Name is required' /> <ValidatedInput type='text' label='Email' name='emailAddress' validate='required,isEmail' model=controllerformData errorHelp= isEmail: 'Email is invalid' required: 'Email is required' /> <ValidatedInput type='password' label='Password' name='password' validate='required,isLength:4:60' model=controllerformData errorHelp= isLength: 'Password must be at least 4 characters long' required: 'Password is required' /> <button type='submit' onClick=thisonSubmit> Register </button> </div> }
Just provide any MobX observable object as model
to all form fields. All values and validation data will be stored there. Pass this object to submit
function to trigger validations for untouched components. Validation rules are specified in validate
attribute, and error messages in errorHelp
ValidatedInput
Should be used instead of the original one for all the fields that need to be validated. All ValidatedInput
s should have name
property defined.
Properties
name: String
required
This property is inherited from Input
with only difference that it is required for ValidatedInput
.
<ValidatedInput name='email' validate='required,isEmail'/>
validate: String
Validation rule is a combination of validator.js method names separated with comma.
<ValidatedInput name='email' validate='required,isEmail,isLength:5:60'/>
In the example above, input's value will be validated with three methods. isLength
method also receives additional params. Inverse rules (like !isNull
) are supported, although in errorHelp
object they're looked up without the exclamation mark.
errorHelp: Object|String
Can be either a string with error text or an object with map ruleName => errorText
.
<ValidatedInput name="email" validate='required,isEmail' errorHelp= required: 'Please enter your email' isEmail: 'Invalid email'/>
model: Object
Any MobX observable object to store all form data
Custom render function and validation function
It's also possible to provide custom render and validation functions to allow for different design or specialized validated components
const telephoneInputRenderer = <ValidatedInput label='Phone number' name='callNumber' validate= PhoneNumber errorHelp='Phone number is not valid' model=appStatecurrentForm renderFunction= <FormGroup controlId=propsid validationState=propsvalidationState > <ControlLabel>propslabel </ControlLabel> <ReactTelephoneInput id=propsid defaultCountry='nl' flagsImagePath='/images/flags.png' value=propsvalue onChange=thishandlePhoneChange /> propshelp && <HelpBlock>propshelp </HelpBlock> </FormGroup> />
Default render function
You can also specify defaultRenderFunction
in case you don't want to repeat yourself in every ValidatedInput
. Just import { config }
from mobx-input
, and override it.
const myDefaultRenderFunction = <div className=`form-group `> <h1>My Own Mega Label</h1> <label for=propsid className='control-label'> propslabel </label> propscomponentClass === 'textarea' ? <textarea id=propsid className='form-control' placeholder=propsplaceholder value=propsvalue onChange = propschangeHandler /> : <input id=propsid className='form-control' type=propstype placeholder=propsplaceholder value=propsvalue onChange = propschangeHandler /> propshelp && <span className='help-block'> propshelp </span> </div> configdefaultRenderFunction = myDefaultRenderFunction