Svelte validator prototype

index.svelte

<script>
  import { createValidator } from '../stores/validator'
  import TextInput from '../components/TextInput.svelte'

  const [valueStore, errorStore, command] = createValidator({
    type: 'string',
    rules: [
      { required: true },
      { length: { min: 4, max: 10 } }
    ]
  })
</script>

<TextInput on:blur="{command.activate}" bind:value="{$valueStore}" />
<span>Violated: {$errorStore}</span>

store.js

import { writable, derived } from 'svelte/store'

export function createValidator(opts) {
  const { type, rules } = opts
  const validator = createValidatorFun(rules)

  const configStore = writable({ enabled: (opts.immediate === true) })
  const valueStore = writable(initialValue(type))
  const errorStore = derived([valueStore, configStore], ([value, config]) => {
    return config.enabled ? validator(value) : []
  })

  const command = {
    activate() {
      configStore.update(config => ({ ...config, enabled: true }))
    }
  }
  
  return [valueStore, errorStore, command]
}

function createValidatorFun(rules) {
  return (value) => {
    return rules.reduce((violated, rule) => {
      const [[name, arg]] = Object.entries(rule)

      if (name == 'required' && checkRequired(value, arg)) {
        return [...violated, 'required']
      } else if (name == 'length' && checkLength(value, arg)) {
        return [...violated, 'length']
      } else {
        return violated
      }
    }, [])
  }
}

function checkRequired(value, _) {
  return !value
}

function checkLength(value, { min, max }) {
  return (min !== undefined && value.length < min) || (max !== undefined && max < value.length)
}

function initialValue(type) {
  if (type === 'string') {
    return ''
  }
}