Run here: http://widdersh.in/tricycle/

validator.js

import {makeDOMDriver, div, input, p} from '@cycle/dom';

//=========================================================
// LIB

// Either monad

const pure =
  value =>
    ({ ok: true, value })
  
const fail =
  value =>
    ({ ok: false, value })

const applyM =
  ({ ok, value }, next) =>
    (ok ? next : fail)(value)
    
const pipeM =
  (...fns) => value =>
    fns.reduce(applyM, value)
    
const pipe =
  (...fns) => value =>
    pipeM(...fns)(pure(value))
  
// Other

const path =
  (...path) => value =>
    path.reduce((v, p) => v[p], value)
    
const wrap =
  (...path) =>
    value =>
      path.reduceRight((v, p) => ({ [p]: v }), value)
    
const comp =
  (...fns) => v =>
    fns.reduceRight((v, f) => f(v), v)
    
const update =
  (subpath, mutate) =>
    comp(wrap(...subpath), mutate, path(...subpath))
    
//=========================================================

const validateMinLength =
  name =>
    name.length === 0
      ? fail("Length must be > 0")
      : pure(name)
      
const validateMaxLength =
  name =>
    name.length > 10
      ? fail("Length must be < 10")
      : pure(name)
      
const validateFormat =
  name =>
    /^[A-Z][a-z]*$/.test(name)
      ? pure(name)
      : fail("Invalid format")

const validate = pipe(
  validateMinLength,
  validateMaxLength,
  validateFormat
)

const statusColor =
  ({ ok }) =>
    ok ? "green" : "red"

const statusText =
  ({ ok, value }) =>
    ok
      ? `Hello ${ value }`
      : `Error: ${ value }`

const nameStatus =
  result =>
    p({ attrs: { style: `color: ${statusColor(result)}` } },
      statusText(result))

const form =
  name => div([
    input({ attrs: { value: name }}),
    nameStatus(validate(name))
  ])

const main = update(["DOM"], DOM => DOM
  .select('input')
  .events('input')
  .map(path("target", "value"))
  .startWith("")
  .map(form)
)

const sources = {
  DOM: makeDOMDriver('.app')
}