1 |
|
2 | # form
|
3 |
|
4 | [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
|
5 |
|
6 | vdux form component
|
7 |
|
8 | ## Installation
|
9 |
|
10 | $ npm install vdux-form
|
11 |
|
12 | ## Usage
|
13 |
|
14 | ## API - props
|
15 |
|
16 | * `onSubmit` - Handles a form submission. Receives the contents of the form, serialized to JSON, and casted by `cast` (if specified).
|
17 | * `validate` - Validate the JSON contents of the form. Blocks `onSubmit` if not valid. Refer to the validation section for more details.
|
18 | * `cast` - Before being validated you can transform the model with this. It should accept a model and return a new model.
|
19 | * `loading` - Whether or not the form is currently loading. If `true`, submits will be disabled. Defaults to false.
|
20 |
|
21 | ## Validation
|
22 |
|
23 | Your `validate` function should accept a model and return an object of the form:
|
24 |
|
25 | `{valid: Boolean, errors: [Errors]}`
|
26 |
|
27 | If `valid` is `false`, `errors` should include a list of invalid fields. Each `error` entry should have the form:
|
28 |
|
29 | `{field, message}`
|
30 |
|
31 | Where `field` is the `name` attribute of the form field that the `message` applies to. Your `message` will then be set on the appropriate field using [setCustomValidity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity). This will trigger an [invalid](https://developer.mozilla.org/en-US/docs/Web/Events/invalid) event on that form field, which you can capture on the input.
|
32 |
|
33 |
|
34 | ### Example
|
35 |
|
36 | ```javascript
|
37 | import Form from 'vdux-form'
|
38 |
|
39 | function render () {
|
40 | return (
|
41 | <Form validate={validate}>
|
42 | <input name='username' onInvalid={e => setError(e.target.validationMessage)} />
|
43 | {
|
44 | error && <span class='error'>{error}</span>
|
45 | }
|
46 | </Form>
|
47 | )
|
48 | }
|
49 |
|
50 | function validate ({username}) {
|
51 | if (username.length < 3) {
|
52 | return {
|
53 | valid: false,
|
54 | errors: [{field: 'username', message: 'Username must be at least 3 characters long'}]
|
55 | }
|
56 | }
|
57 |
|
58 | return {
|
59 | valid: true
|
60 | }
|
61 | }
|
62 | ```
|
63 |
|
64 | ## License
|
65 |
|
66 | MIT
|