diff --git a/README.md b/README.md index 157c0fd..e203ec5 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ export default (options = {}) { } }) }); - + }; } ``` @@ -135,9 +135,35 @@ export default (options = {}) { #### Validation rules Check `helpers/rules.js`. +Let's say you want to create your own rule for a field. A field input that shouldn't contain white space. You can use the +matchRegexp in `helpers/rules.js` or create your own rule. We save the below as formRules.js + +```js +export default { + noWhitespace: (value) => { + return value.indexOf(' ') === -1 + } +} +``` + +Add the rule to you forms rules. + +```js +import {noWhitespace} from './formRules' + +controller.addModules({ + forms: Forms({ + rules: { + noWhitespace + } + }) +}) +``` + +Now you can reference it in `validations` for your input. #### Defining when a value exists -To figure out if your field actually has a value the Forms module uses a generic check for it. If its undefined, empty string, null or false it considerns the field as "not having a value". +To figure out if your field actually has a value the Forms module uses a generic check for it. If its undefined, empty string, null or false it considers the field as "not having a value". If you want to override this, you can. For example you want to create a list of items where it is required to have three items. @@ -173,7 +199,7 @@ import { Decorator as Cerebral } from 'cerebral-view-react'; import isValidForm from 'cerebral-module-forms/helpers/isValidForm'; @Cerebral({ - form: ['someForm'] + form: 'someForm' }) class Form extends React.Component { render() { @@ -187,7 +213,7 @@ class Form extends React.Component { signals.forms.fieldChanged({ - field: ['someForm', 'name'], + field: 'someForm.name', value: e.target.value })}/> @@ -211,7 +237,7 @@ validation occuring, you can set: ```js signals.forms.fieldChanged({ - field: ['someForm', 'name'], + field: 'someForm.name', value: e.target.value, preventValidation: true }); @@ -230,11 +256,11 @@ import Input from 'cerebral-module-forms/react/Input'; import Checkbox from 'cerebral-module-forms/react/Checkbox'; import Select from 'cerebral-module-forms/react/Select'; - + - + - ``` The **select** component expects its field to have an array of options like: @@ -253,5 +279,5 @@ The **select** component expects its field to have an array of options like: ``` ### Controlled Components -Since Cerebral is handling all state we expect the input to be controlled. +Since Cerebral is handling all state we expect the input to be controlled. See [https://facebook.github.io/react/docs/forms.html](https://facebook.github.io/react/docs/forms.html)