yoshuawuyts / Validate Formdata
Programming Languages
validate-formdata
Data structure for validating form data.
Features
- minimal GC pressure
- optimized for unidirectional rendering
- framework agnostic
- only a data structure, no opinions on UI
- about 50 lines of code
- creates a
window.FormDataobject, ready for XHR
Usage
var html = require('choo/html')
var choo = require('choo')
var xhr = require('xhr')
var validateFormdata = require('validate-formdata')
var app = choo()
app.route('/', function (state, emitter) {
var pristine = state.form.pristine
var errors = state.form.errors
var values = state.form.values
return html`
<body>
<form onsubmit=${emitter.bind(emitter, 'submit')}>
<label for="name">
${errors.name && !pristine.name ? errors.name.message : 'valid'}
</label>
<input name="name"
type="text"
autofocus
value=${values.name}
placeholder="name"
onchange=${validate}>
<label for="password">
${errors.password && !pristine.password ? errors.password.message : 'valid'}
</label>
<input name="password"
type="password"
value=${values.password}
placeholder="password"
onchange=${validate}>
<input name="submit"
disabled=${!state.form.valid}
type="submit"
value="Login">
</form>
</body>
`
function validate (e) {
emitter.emit('validate', e)
}
})
app.use(function (state, emitter) {
var validator = validateFormdata()
state.form = validator.state
validator.field('name', function (data) {
if (!data) return new Error("name can't be empty")
if (!(data instanceof String)) return new Error('name should be a string')
if (data.length < 6) return new Error('name should be at least 6 characters')
})
validator.field('password', function (data) {
if (!data) return new Error("password can't be empty")
if (!(data instanceof String)) return new Error('password should be a string')
if (data.length < 6) return new Error('password should be at least 6 characters')
})
emitter.on('validate', function (e) {
validator.validate(e.target.name, e.target.value)
emitter.emit('render')
})
emitter.on('submit', function (e) {
if (!state.form.valid) throw new Error('form not valid')
var opts = { body: validator.formData() }
xhr.post('/my-url', opts, function (err, res) {
if (err) throw err
console.log(res)
})
})
})
app.mount('body')
API
validator = validateFormdata()
Create a new instance.
validator.state
The state object is meant to be passed directly into the UI for rendering:
- validator.state.pristine[key]: Check if the key has been validated before.
- validator.state.errors[key]: Check if there's an error for the key.
- validator.state.values[key]: Get the value from the key.
- validator.state.valid: Check if the form is valid.
- validator.state.changed: Check if the form was changed.
validator.field(key, [opts], validateFunction)
Create a new field validation function for the given key. The validation
functions should either return nothing, or an Error object. The .message
property from the error can be used when rendering.
validator.field(key, [opts], validateFunction)
Create a new file validation function for the given key. The validation
functions should either return nothing, or an Error object. The .message
property from the error can be used when rendering. Opts can contain:
- required: default: true. Determine if the field is required to pass.
validator.validate(key, value)
Validate data. The first time the validate function is called for a key it sets
the corresponding state.pristine[key] to false. state.valid is set to
true when all values are valid.
- required: default: true. Determine if the field is required to pass.
validator.formData()
Return a window.FormData instance from the form. Can be used to send
Multipart data into an XHR request. Make sure state.valid is true before
calling this.
validator.changed
Check if the form has changed to determine if it should be re-rendered. An
example of a change is: "the form didn't have an error, and now it does." This
value will be false if only new data was added.