180 lines
6.3 KiB
JavaScript
180 lines
6.3 KiB
JavaScript
// License: LGPL-3.0-or-later
|
|
const h = require('snabbdom/h')
|
|
const R = require('ramda')
|
|
const flyd = require('flyd')
|
|
const serializeForm = require('form-serialize')
|
|
flyd.filter = require('flyd/module/filter')
|
|
flyd.mergeAll = require('flyd/module/mergeall')
|
|
flyd.keepWhen = require('flyd/module/keepwhen')
|
|
flyd.sampleOn = require('flyd/module/sampleon')
|
|
const readableProp = require('./lib/readable-prop.es6')
|
|
const emailRegex = require('./lib/email-regex.es6')
|
|
const currencyRegex = require('./lib/currency-regex.es6')
|
|
|
|
// constraints: a hash of key/vals where each key is the name of an input
|
|
// and each value is an object of validator names and arguments
|
|
//
|
|
// validators: a hash of validation names mapped to boolean functions
|
|
//
|
|
// messages: a hash of validator names and field names mapped to error messages
|
|
//
|
|
// messages match on the most specific thing in the messages hash
|
|
// - first checks if there is an exact match on field name
|
|
// - then checks for match on validator name
|
|
//
|
|
// Given a constraint like:
|
|
// {name: {required: true}}
|
|
//
|
|
// All of the following will set an error for above, starting with most specific first:
|
|
// {name: {required: 'Please enter a valid name'}
|
|
// {name: 'Please enter your name'}
|
|
// {required: 'This is required'}
|
|
|
|
|
|
function init(state) {
|
|
state = R.merge({
|
|
validators: R.merge(defaultValidators, state.validators || {})
|
|
, messages: R.merge(defaultMessages, state.messages || {})
|
|
, focus$: flyd.stream()
|
|
, change$: flyd.stream()
|
|
, submit$: flyd.stream()
|
|
}, state || {})
|
|
const valField = validateField(state)
|
|
const valForm = validateForm(state)
|
|
|
|
const fieldErr$ = flyd.map(valField, state.change$)
|
|
const formErr$ = flyd.map(valForm, state.submit$)
|
|
const clearErr$ = flyd.map(ev => [ev.target.name, null], state.focus$)
|
|
const allErrs$ = flyd.mergeAll([fieldErr$, formErr$, clearErr$])
|
|
|
|
// Stream of all errors combined into one object
|
|
state.errors$ = flyd.scan(R.assoc, {}, allErrs$)
|
|
|
|
// Stream of field names and new values and whole form data
|
|
state.nameVal$ = flyd.map(node => [node.name, node.value], state.change$)
|
|
state.data$ = flyd.scan(R.assoc, {}, state.nameVal$)
|
|
|
|
// Streams of errors and data on form submit
|
|
const errorsOnSubmit$ = flyd.sampleOn(state.submit$, state.errors$)
|
|
state.validSubmit$ = flyd.filter(R.compose(R.none, R.values), errorsOnSubmit$)
|
|
state.validData$ = flyd.keepWhen(state.validSubmit$, state.data$)
|
|
|
|
return state
|
|
}
|
|
|
|
|
|
// Pass in an array of validation functions and the event object
|
|
// Will return a pair of [name, errorMsg] (errorMsg will be null if no errors present)
|
|
const validateField = R.curry((state, node) => {
|
|
const value = node.value
|
|
const name = node.name
|
|
if(!state.constraints[name]) return [name, null] // no validators for this field present
|
|
|
|
// Find the first constraint that fails its validator
|
|
for(var valName in state.constraints[name]) {
|
|
const arg = state.constraints[name][valName]
|
|
if(!state.validators[valName]) {
|
|
console.warn("Form validation constraint does not exist:", valName)
|
|
} else if(!validators[valName](value, arg)) {
|
|
const msg = getErr(messages, name, valName, arg)
|
|
return [name, String(msg)]
|
|
}
|
|
}
|
|
return [name, null] // no error found
|
|
})
|
|
|
|
|
|
// Given the messages object, the validator argument, the field name, and the validator name
|
|
// Retrieve and apply the error message function
|
|
const getErr = (messages, name, valName, arg) => {
|
|
const err = messages[name]
|
|
? messages[name][valName] || messages[name]
|
|
: messages[valName]
|
|
if(typeof err === 'function') return err(arg)
|
|
else return err
|
|
}
|
|
|
|
|
|
// Retrieve errors for the entire set of form data, used on form submit events,
|
|
// using the form data saved into the state
|
|
const validateForm = R.curry((state, node) => {
|
|
const formData = serializeForm(node, {hash: true})
|
|
for(var fieldName in constraints) { // not using higher order .map or reduce so we can break and return early
|
|
for(var valName in constraints[fieldName]) {
|
|
const arg = constraints[fieldName][valName]
|
|
if(!validators[valName]) {
|
|
console.warn("Form validation constraint does not exist:", valName)
|
|
} else if(!validators[valName](value, arg)) {
|
|
const msg = getErr(messages, name, valName, arg)
|
|
return [name, String(msg)]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// -- Views
|
|
|
|
const validatedForm = R.curry((state, elm) => {
|
|
elm.data = R.merge(elm.data, {
|
|
on: {submit: ev => {ev.preventDefault(); state.submit$(ev.currentTarget)}}
|
|
})
|
|
return elm
|
|
})
|
|
|
|
|
|
// A single form field
|
|
// Data takes normal snabbdom data for the input/select/textarea (eg props, style, on)
|
|
const validatedField = R.curry((state, elm) => {
|
|
if(!elm.data.props || !elm.data.props.name) throw new Error(`You need to provide a field name for validation (using the 'props.name' property)`)
|
|
var err = state.errors$()[elm.data.props.name]
|
|
var invalid = err && err.length
|
|
|
|
elm.data = R.merge(elm.data, {
|
|
on: {
|
|
focus: state.focus$
|
|
, change: ev => state.change$([ev.currentTarget, state])
|
|
}
|
|
, class: { invalid }
|
|
})
|
|
|
|
return h('div', {
|
|
props: {className: 'ff-field' + (invalid ? ' ff-field--invalid' : ' ff-field--valid')}
|
|
}, [
|
|
invalid ? h('p.ff-field-errorMessage', err) : ''
|
|
, elm
|
|
])
|
|
})
|
|
|
|
var defaultMessages = {
|
|
email: 'Please enter a valid email address'
|
|
, required: 'This field is required'
|
|
, currency: 'Please enter valid currency'
|
|
, format: "This doesn't look like the right format"
|
|
, isNumber: 'This should be a number'
|
|
, max: n => `This should be less than ${n}`
|
|
, min: n => `This should be at least ${n}`
|
|
, equalTo: n => `This should be equal to ${n}`
|
|
, maxLength: n => `This should be no longer than ${n}`
|
|
, minLength: n => `This should be longer than ${n}`
|
|
, lengthEquals: n => `This should have a length of ${n}`
|
|
, includedIn: arr => `This should be one of: ${arr.join(', ')}`
|
|
}
|
|
|
|
var defaultValidators = {
|
|
email: val => val.match(emailRegex)
|
|
, present: val => Boolean(val)
|
|
, currency: val => String(val).match(currencyRegex)
|
|
, format: (val, arg) => String(val).match(arg)
|
|
, isNumber: val => !isNaN(val)
|
|
, max: (val, n) => val <= n
|
|
, min: (val, n) => val >= n
|
|
, equalTo: (val, n) => n === val
|
|
, maxLength: (val, n) => val.length <= n
|
|
, minLength: (val, n) => val.length >= n
|
|
, lengthEquals: (val, n) => val.length === n
|
|
, includedIn: (val, arr) => arr.indexOf(val) !== -1
|
|
}
|
|
|
|
module.exports = {init, validatedField, validatedForm}
|
|
|