Cacher is the code snippet organizer for pro developers

    // validation option
    var constraints = {
      company: {
        presence: {message: '^未入力です。'}
      },
      name: {
        presence: {message: '^未入力です。'}
      },
      email: {
        presence: {message: '^未入力です。'},
        email: {message: '^メールアドレスの形式ではありません。'}
      },
      zip: {
        presence: {message: '^未入力です。'},
        numericality: {message: '^半角数字で入力してください。'}
      },
      address: {
        presence: {message: '^未入力です。'}
      },
      tel: {
        numericality: {message: '^半角数字で入力してください。'}
      }
    }

    var validateCheck = function (name, value) {
      if (!constraints[name]) return
      var get$error = function (name) {
        var $this = $('[name="' + name + '"]')
        if (!$this.next('span.error').length) {
          $this.after('<span class="error"></span>')
        }
        return $this.next('span.error')
      }
      var val = value || null // for validate.js
      if (validate.single(val, constraints[name])) {
        var texts = validate.single(val, constraints[name]).join('<br>')
        get$error(name).html(texts)
      } else {
        get$error(name).remove()
      }
    }

    var namesSelector = map(Object.keys(constraints), function (name) {
      return '[name="' + name + '"]'
    }).join(',')
    $(namesSelector).on('change', function () {
      var $this = $(this)
      var name = $this.attr('name')
      var value = $this.val()
      validateCheck(name, value)
    })

    // set submit button
    $('[data-type-submit]').on('click', function (ev) {
      ev.preventDefault()
      var $button = $(this)
      var $form = $button.closest('form')
      var $submit = $button.find('[type="submit"]')

      each($form.serializeArray(), function (props) {
        validateCheck(props.name, props.value)
      })

      // submit
      if ($('.error').length) {
        $('.error:eq(0)').prev().focus()
      } else {
        $button.off('click')
        $submit.click()
      }
    })
  }