Created
September 1, 2016 15:47
-
-
Save yoshuawuyts/ab5beca3dcee9e28546f34b215e11e77 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Validate = require('form-element/validate') | |
const State = require('form-element/state') | |
const Form = require('form-element') | |
const html = require('bel') | |
const fields = [ | |
['credentials', [ | |
['username', 'text', (str) => str.length < 20], | |
['password', 'password', (str) => str.length > 8 && str.length < 99] | |
]], | |
['address', [ | |
['city', 'text'], | |
['street', 'text'] | |
]] | |
] | |
// to validate async, check that all fields are not pristine and no errors, | |
// then send the formState off to the server and set corresponding errors | |
const validate = Validate(fields) | |
const state = State(fields) | |
// => { | |
// username: { pristine: true, error: null, data: '' }, | |
// password: { pristine: true, error: null, data: '' }, | |
// city: { pristine: true, error: null, data: '' }, | |
// street: { pristine: true, error: null, data: '' } | |
// } | |
const model = { | |
namespace: 'form', | |
state: state, | |
reducers: { validate: validate } | |
} | |
formView.model = model | |
module.exports = formView | |
function formView (state, prev, send) { | |
const form = createForm(send) | |
return html`<section>${form(state.form)}</section>` | |
} | |
function createForm (formState, send) { | |
return Form(fields, formState, (newFormState) => { | |
send('form:validate', newFormState) | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The above wasn't flexible enough, and too slow. This should work better:
with comments
without comments