Purescript Halogen 手动触发表单外的输入验证

Question

我有一些用 required 属性标记的输入字段，但无法找到触发验证检查的方法（我不在表单内部工作，因此使用默认提交按钮操作对我不起作用）。

快速搜索显示了核心 html 元素类型的许多有效性函数，但我不确定如何将这些应用于卤素。

有什么方法可以触发 DOM 效果来检查页面上所有必需的输入并返回结果吗？

这是一个示例组件，展示了我正在努力实现的目标

import Prelude

import Data.Maybe (Maybe(..))
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP

data Message = Void

type State =
  { textValue :: String
  , verified :: Boolean
  }

data Query a = ContinueClicked a | InputEntered String a

inputHtml :: State -> H.ComponentHTML Query
inputHtml state =
  HH.div [ HP.class_ $ H.ClassName "input-div" ]
         [ HH.label_ [ HH.text "This is a required field" ]
         , HH.input [ HP.type_ HP.InputText
                    , HE.onValueInput $ HE.input InputEntered
                    , HP.value state.textValue
                    , HP.required true
                    ]
         , HH.button [ HE.onClick $ HE.input_ ContinueClicked ]
                     [ HH.text "Continue"]
         ]

verifiedHtml :: H.ComponentHTML Query
verifiedHtml =
  HH.div_ [ HH.h3_ [ HH.text "Verified!" ] ]

render :: State -> H.ComponentHTML Query
render state = if state.verified then verifiedHtml else inputHtml state

eval :: forall m. Query ~> H.ComponentDSL State Query Message m
eval = case _ of
  InputEntered v next -> do
    H.modify $ (_ { textValue = v })
    pure next
  ContinueClicked next -> do
    let inputValid = false -- somehow use the required prop to determine if valid
    when inputValid $ H.modify $ (_ { verified = true })
    pure next

initialState :: State
initialState =
  { textValue : ""
  , verified : false
  }

component :: forall m. H.Component HH.HTML Query Unit Message m
component =
  H.component
    { initialState: const initialState
    , render
    , eval
    , receiver: const Nothing
    }

Answer 1

我不认为依赖 HTML 表单验证是在 Halogen 应用程序中检查输入的最有效方法。但我假设你有你的理由并给出答案。

首先，如果我们想要处理 DOM 元素，我们需要一种方法来检索它们。这是 document.getElementById

的纯脚本版本

getElementById
    :: forall a eff
     . (Foreign -> F a)
    -> String
    -> Eff (dom :: DOM | eff) (Maybe a)
getElementById reader elementId =
    DOM.window
        >>= DOM.document
        <#> DOM.htmlDocumentToNonElementParentNode
        >>= DOM.getElementById (wrap elementId)
        <#> (_ >>= runReader reader)

runReader :: forall a b. (Foreign -> F b) -> a -> Maybe b
runReader r =
    hush <<< runExcept <<< r <<< toForeign

（暂时不用担心新导入，最后有一个完整的模块）

此 getElementById 函数采用 read* 函数（可能来自 DOM.HTML.Types）来确定您返回的元素类型，以及作为字符串的元素 ID。

为了使用它，我们需要在您的 HH.input:

中添加一个额外的属性

HH.input [ HP.type_ HP.InputText
         , HE.onValueInput $ HE.input InputEntered
         , HP.value state.textValue
         , HP.required true
         , HP.id_ "myInput"  <-- edit
         ]

旁白：带有 Show 实例的总和类型比到处硬编码字符串 id 更安全。我会把那个留给你。

酷。现在我们需要从 eval 函数的 ContinueClicked 分支调用它：

ContinueClicked next ->
    do maybeInput <- H.liftEff $
            getElementById DOM.readHTMLInputElement "myInput"
    ...

这给了我们一个 Maybe HTMLInputElement 来玩。 HTMLInputElement 应该有一个类型为 ValidityState 的 validity 属性，其中包含我们要查找的信息。

DOM.HTML.HTMLInputElement 有一个 validity 函数，可以让我们访问那个属性。然后我们需要做一些外部值操作来尝试获取我们想要的数据。为简单起见，让我们尝试拉出 valid 字段：

isValid :: DOM.ValidityState -> Maybe Boolean
isValid =
    runReader (readProp "valid" >=> readBoolean)

有了那个小帮手，我们可以完成 ContinueClicked 分支：

ContinueClicked next ->
    do maybeInput <- H.liftEff $
            getElementById DOM.readHTMLInputElement "myInput"

       pure next <*
       case maybeInput of
            Just input ->
                do validityState <- H.liftEff $ DOM.validity input
                   when (fromMaybe false $ isValid validityState) $
                        H.modify (_ { verified = true })
            Nothing ->
                H.liftEff $ log "myInput not found"

然后把它们放在一起我们有...

module Main where

import Prelude

import Control.Monad.Aff (Aff)
import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE, log)
import Control.Monad.Except (runExcept)

import Data.Either (hush)
import Data.Foreign (Foreign, F, toForeign, readBoolean)
import Data.Foreign.Index (readProp)
import Data.Maybe (Maybe(..), fromMaybe)
import Data.Newtype (wrap)

import DOM (DOM)
import DOM.HTML (window) as DOM
import DOM.HTML.HTMLInputElement (validity) as DOM
import DOM.HTML.Types
    (ValidityState, htmlDocumentToNonElementParentNode, readHTMLInputElement) as DOM
import DOM.HTML.Window (document) as DOM
import DOM.Node.NonElementParentNode (getElementById) as DOM

import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
import Halogen.VDom.Driver (runUI)

main :: Eff (HA.HalogenEffects (console :: CONSOLE)) Unit
main = HA.runHalogenAff do
    body <- HA.awaitBody
    runUI component unit body

type Message
    = Void

type Input
    = Unit

type State
    = { textValue    :: String
      , verified     :: Boolean
      }

data Query a
    = ContinueClicked a
    | InputEntered String a

component
    :: forall eff
     . H.Component HH.HTML Query Unit Message (Aff (console :: CONSOLE, dom :: DOM | eff))
component =
    H.component
        { initialState: const initialState
        , render
        , eval
        , receiver: const Nothing
        }

initialState :: State
initialState =
  { textValue : ""
  , verified : false
  }

render :: State -> H.ComponentHTML Query
render state =
    if state.verified then verifiedHtml else inputHtml
  where
    verifiedHtml =
        HH.div_ [ HH.h3_ [ HH.text "Verified!" ] ]

    inputHtml =
        HH.div
            [ HP.class_ $ H.ClassName "input-div" ]
            [ HH.label_ [ HH.text "This is a required field" ]
            , HH.input
                [ HP.type_ HP.InputText
                , HE.onValueInput $ HE.input InputEntered
                , HP.value state.textValue
                , HP.id_ "myInput"
                , HP.required true
                ]
            , HH.button
                [ HE.onClick $ HE.input_ ContinueClicked ]
                [ HH.text "Continue" ]
             ]

eval
    :: forall eff
     . Query
    ~> H.ComponentDSL State Query Message (Aff (console :: CONSOLE, dom :: DOM | eff))
eval = case _ of
    InputEntered v next ->
        do H.modify (_{ textValue = v })
           pure next

    ContinueClicked next ->
        do maybeInput <- H.liftEff $
                getElementById DOM.readHTMLInputElement "myInput"

           pure next <*
           case maybeInput of
                Just input ->
                    do validityState <- H.liftEff $ DOM.validity input
                       when (fromMaybe false $ isValid validityState) $
                            H.modify (_ { verified = true })
                Nothing ->
                    H.liftEff $ log "myInput not found"

getElementById
    :: forall a eff
     . (Foreign -> F a)
    -> String
    -> Eff (dom :: DOM | eff) (Maybe a)
getElementById reader elementId =
    DOM.window
        >>= DOM.document
        <#> DOM.htmlDocumentToNonElementParentNode
        >>= DOM.getElementById (wrap elementId)
        <#> (_ >>= runReader reader)

isValid :: DOM.ValidityState -> Maybe Boolean
isValid =
    runReader (readProp "valid" >=> readBoolean)

runReader :: forall a b. (Foreign -> F b) -> a -> Maybe b
runReader r =
    hush <<< runExcept <<< r <<< toForeign

Purescript Halogen 手动触发表单外的输入验证

Purescript Halogen manually trigger input validation outside of a form

purescript

halogen