Back to Questions
806
views5
comments
UI.Next.Forms.InputWithError does not show errors
websharperbootstrapui.nextforms

As the package is outdated, I've just copied source of InputWithError into my code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

[<JavaScript>]
module M =
    let private inputWithError inputFun lbl extras ((target: Var<_>), labelExtras, targetExtras) (submitView: View<Result<_>>) =
        let tv = submitView.Through target
        let errorOpt, errorClassOpt =
            tv.Map (fun res ->
                // Extract a single line of errors, and the optional attribute for them
                match res with
                | Result.Success _
                | Result.Failure [] ->
                    None, None
                | Result.Failure errs ->
                    let errors =
                        errs
                        |> List.map (fun e -> e.Text)
                        |> List.reduce (fun a b -> a + "; " + b)
                    Some errors, Some "has-error"
            )
            |> fun view ->
                view.Map fst, view.Map snd
        divAttr [
            yield cls "form-group"
            yield Attr.DynamicClass "has-error" errorClassOpt (fun opt -> opt.IsSome)
            yield! extras
        ] [
            yield labelAttr labelExtras [text lbl] :> Doc
            yield inputFun (cls "form-control" :: targetExtras) target :> Doc
            yield errorOpt.Doc (function
                | None -> Doc.Empty
                | Some error ->
                    spanAttr [cls "help-block"] [text error] :> Doc
            )
        ]
     
    let simpleInputWithError lbl target submit = inputWithError Doc.Input lbl [] (target, [], []) submit

and use it in a simple form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[<JavaScript>]
module Client = 
    open WebSharper.Forms

    type Person = { Name: string }
    
    let form (person: Person) =
        Form.Return (fun name -> { Name = name })
        <*> (Form.Yield person.Name |> Validation.IsNotEmpty "Enter a name")
        |> Form.WithSubmit

    let render (name: Var<string>) (submit: View<Result<_>>) =
        M.simpleInputWithError "Name" name submit

    let main() =
        form { Name = "person1"}
        |> Form.Render (fun name submit ->
            divAttr [cls "form-inline"] [ 
                render name submit.View
                Doc.ButtonValidate "Save" [cls "form-control"] submit
            ])

The submit button validation works ok - it becomes disabled if the input field is empty. But the input inself does not show validation errors:

alt text

.

Thanks for reporting with a snippet ;) Looks like a bug with Doc.ButtonValidate, but Doc.Button and Controls.Button both work (but only validate on click).

By on 12/27/2015 12:15 PM ()

:)

Yes, they work, but what I'm trying to achive is to show localized errors as user fills the form, immediately. Is it possible? I assume the whole form validation result is constantly propagated to Submitter.View and I can use it to show errors in "real time". Isn't it not the case?

By on 12/28/2015 12:14 AM ()

There are a couple things I would fix with Doc.ButtonValidate. First, it should really be in UI.Next and not in WebSharper.Forms, and likely under a more precise name, a name that reflects that it provides visual validation (turns on and off).

It should, as you say, provide validation as one types indeed, but right now it doesn't: the code only performs validation on clicks, which is half-silly since when failing it's disabled :)

Anyhow, this is a bug and should be fixed to check the key events as one types and not the click event. I filed a new bug for this.

By on 12/28/2015 4:31 AM ()

I've created a TryWS snippet:

By on 12/27/2015 5:44 AM ()

Did you turn on the "include-prerelease" flag when updating? The package (latest is 3.6.6.16-alpha here) is marked alpha.

By on 12/27/2015 12:05 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper