Validate-formdata NPM

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.FormData object, 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.pristinekey: Check if the key has been validated before.
validator.state.errorskey: Check if there's an error for the key.
validator.state.valueskey: 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.