core.cljs

(def form-app-state { })

(def schema {
              :first-name {:type :text
                           :label "First Name"
                           :required true } 
              :middle-names {:type :text
                             :label "Middle Name(s)"
                            :required false } 
              :surname {:type :text
                        :label "Surname"
                        :required true } 
              })


(defn is-valid? [schema-item current-value]
  (if (:required schema-item)
    (not (empty? current-value))
    true))

(defn form-text-element [app owner schema schema-key]
  (let [item (get schema schema-key)
        current-value (get app schema-key)
        not-touched (not (or (om/get-render-state owner [:touched schema-key]) false))
        is-valid (or not-touched (is-valid? item current-value))]
    (dom/div #js {:className "form-element"}
             (dom/label nil (:label item))
             (dom/input #js {:type "text"
                             :onChange (fn [e] 
                                         (om/update! app (fn [state]
                                                           (assoc state schema-key
                                                                  (.. e -target -value)))))
                            :onBlur (fn [e]
                                      (om/set-state! owner 
                                                     [:touched schema-key]
                                                     true))})
             (dom/div nil (get app schema-key)) ; debug - show the current value
             (dom/div nil (str is-valid)) ; debug - show is valid
             )))


(defn application-app [data owner]
  (reify
    om/IInitState
    (init-state [_]
      { :touched {} })
    om/IRenderState
    (render-state [this _] 
      (dom/div nil
               (form-text-element data owner schema :first-name)
               (form-text-element data owner schema :middle-names)
               (form-text-element data owner schema :surname))
      )))

(om/root form-app-state application-app (.getElementById js/document "form-app"))