Submit form in Elm

StandardForm.elm

module Bootstrap.StandardForm where

import Signal         exposing (Address)
import Html           exposing (Html, text)
import Html.Shorthand exposing (..)
import Bootstrap.Html exposing (..)
import List
import Maybe

saveButton  : BtnParam
            -> Bool
            -> Address a
            -> a
            -> Html
saveButton p enabled addr x =
  fieldset_ (not enabled)
  [ btnPrimary_ p addr x
  ]

cancelButton  : BtnParam
              -> Address a
              -> a
              -> Html
cancelButton p cancelOnClick =
  btnDefault_ p cancelOnClick

type alias FormButtonsParam a b =
  { save    : { btn     : BtnParam
              , enabled : Bool
              , onClick : (Address a, a)
              }
  , cancel  : Maybe
              { btn     : BtnParam
              , onClick : (Address b, b)
              }
  }

formButtons : FormButtonsParam a b
            -> Html
formButtons p =
  let filterJust = List.filterMap identity
  in  div' {class = "standard-form-buttons"}
      <|  filterJust [ Maybe.map (\c -> cancelButton c.btn (fst c.onClick) (snd c.onClick)) p.cancel ]
      ++  [ saveButton p.save.btn p.save.enabled (fst p.save.onClick) (snd p.save.onClick)
          , buttonSubmit'
            { class = "hidden-submit"
            }
            []
            -- TODO: submit - see https://github.com/evancz/virtual-dom/pull/5
            --[ btnSubmitPrimary'
            --  { btnParam
            --  | label <- Just "Save"
            --  , tooltip <- Just "Save the information"
            --  }
            --]
          ]

type alias FormParam =
  { class      : ClassString
  , novalidate : Bool
  }

{-| Make a form element with the standard actions present
-}
form : FormParam -> FormButtonsParam a b -> List Html -> Html
form p bp formBody =
  form'
  { class  = p.class
  , novalidate = p.novalidate
  , update = { onSubmit = Nothing
             , onEnter = Nothing
             }
  }
  <|  formBody
  ++  [ formButtons bp
      ]

validate.coffee

#
# Very rough somewhat angular/jquery-specific code, sorry
# To validate the form:
#

validateMyForm = (data) ->
      formEl = $document[0].querySelector "form.xxxxxxx"
      submitEl = formEl.querySelector "button[type=\"submit\"]"
      if data? && data.length == 0
        # Allow empty data (delete all user sourcing)
        valid = true
      else
        # Trigger form validation if the form is invalid
        if formEl.reportValidity?
          # reportValidity is not supported on older browsers
          valid = formEl.reportValidity()
        else
          # formEl.submit() if not formEl.checkValidity()
          valid = formEl.checkValidity()
          if not valid
            if $document[0].createEvent?
              # dispatch for firefox + others
              e = $document[0].createEvent "HTMLEvents"
              e.initEvent "click", true, true
              submitEl.dispatchEvent e
            else
              e = $document[0].createEventObject()
              submitEl.fireEvent 'onclick', e
      return valid
 
#     
# Stuff to disable key presses
#

        # Disable enter key presses on the form (which submits the form automatically)
        # See http://stackoverflow.com/a/587575/167485
        (angular.element $document[0]).on "keypress", "form.xxxxxxx", (event) ->
          isTextArea = /textarea/i.test (event.target ? event.srcElement).tagName
          if (event.keyCode ? event.which ? event.charCode) == 13 and not isTextArea
            # Prevent form submission
            event.preventDefault()
            # Trigger form validation
            validateMyForm()
            return false
          return