boop.js

import moment from 'moment'
import validate from 'validate.js'

import constraints from './validation'
import formDataJSON from 'formdata-json'
import { appendError, removeError } from '../bulma-form-error'
import addUser from './addUser'
import bulmaFatalError from '../bulma-fatal'

validate.extend(validate.validators.datetime, {
  parse: (value, options) => +moment.utc(value),
  format: (value, options) => {
    const format = options.dateOnly ? 'DD-MM-YYYY' : 'DD-MM-YYYY hh:mm:ss'
    return moment.utc(value).format(format)
  }
})

export const subscribe = (formID) => {
  const form = document.getElementById(formID)
  if (!form) {
    throw new Error(`Could not update form #${formID} because no form with that ID exists!`)
  }

  const emailInput = form.querySelector('[name=email]')
  if (!emailInput) {
    throw new Error(`Could not find [name=email] in subscribe form!`)
  }

  const controls = form.querySelectorAll('[name]')
  controls.forEach(control => control.addEventListener('focus', removeError))

  form.addEventListener('submit', ev => {
    ev.preventDefault()
    const formData = new FormData(form)
    const json = formDataJSON(formData)
    const errors = validate(json, constraints)
    
    if (errors) {
      return Object.keys(errors).forEach(key => {
        appendError(`#${formID} .${key}`, errors[key])
      })
    }

    addUser(json)
      .then(resp => {
        if (resp.errors) {
          return Object.keys(resp.errors).forEach(key => {
            appendError(`#${formID} .${key}`, resp.errors[key])
          })
        }
        window.location.replace('/surveys')
      })
      .catch(err => {
        console.log(err)
        bulmaFatalError('Oh No!', 'Something broke! We\'re fixing it', 'img/sad.svg')
      })
  })
}

validator.js

import moment from 'moment'

export default ({
  firstname: {
    presence: {
      message: '^Enter a valid firstname'
    },
    length: {
      minimum: 2,
      maximum: 20,
      message: '^Enter a valid firstname'
    }
  },
  surname: {
    presence: {
      message: '^Enter a valid surname'
    },
    length: {
      minimum: 2,
      maximum: 20,
      message: '^Enter a valid surname'
    }
  },
  email: {
    presence: {
      message: '^Enter a valid email address'
    },
    email: {
      message: '^Enter a valid email address'
    }
  },
  birthday: {
    datetime: {
      dateOnly: true,
      latest: moment.utc().subtract(18, 'years'),
      message: '^You need to be at least 18 years old :('
    }
  },
  gender: {
    presence: {
      message: '^Are you male or female?'
    },
    inclusion: {
      within: [ 'male', 'female' ],
      message: '^Are you an alien?'
    }
  },
  isSubscribed: {
    inclusion: {
      within: [ 'on', 'off' ],
      message: '^WTF?'
    }
  }
})