View difference between Paste ID: cp8kw3JQ and sxaMRnFP

 namespace Validation_Scratchpad
 
 open System
 open IntelliFactory.WebSharper
 open IntelliFactory.WebSharper.UI.Next
 open IntelliFactory.WebSharper.UI.Next.Html
 
 [<JavaScript>]
 module Client =
 
     // Model-y Stuff Here
     type EMailAddress = EMail of string
     type TelephoneNumber = TN of string
 
     let showPhone (TN s) = s
     let showEMail (EMail e) = e
 
     type Person =
         {
             PersonName : string
             PersonEMailAddress : EMailAddress
             PersonTelephoneNumber : TelephoneNumber
         }
 
     let mkPerson name num email =
         {
             PersonName = name
             PersonEMailAddress = email
             PersonTelephoneNumber = num
         }
 
     // Define Result sum type
     type ErrorMsg = string
     type Result<'a> = | Success of 'a | Failure of ErrorMsg
 
     // Helpers
     let txt = Doc.TextNode
     let (==>) attrId attrVal = Attr.Create attrId attrVal
 
     // Validation: takes num var, produces Result<TelephoneNumber>
     let validateNum vNum =
         View.FromVar vNum
         |> View.Map (fun num ->
             if String.forall Char.IsDigit num && num.Length > 0 then
                 TN num |> Success
             else
                 Failure "Not a valid telephone number"
         )
 
     // Same for email
     let validateEmail vEmail =
         View.FromVar vEmail
         |> View.Map (fun (email : string) ->
             if email.Contains("@") then
                 EMail email |> Success
             else
                 Failure "Not a valid email address"
         )
 
     // Displays nothing if success, err if failure
     let DisplayFailure = function
         | Success _ -> ""
         | Failure err -> err + ", "
 
 
     // View.Do and let! translate to View.Bind, so this updates whenever
     // any of the fields change.
     // We take a View<string> for name, and View<Result<TelephoneNumber>> and
     // View<Result<EmailAddress>> for the validated fields
     // NOTE: This won't compile in W# in the public UI.Next just yet (we forgot a JS tag)
     // but will do on next release
     let PersonView nameView telView emailView =
         View.Do {
             let! name = nameView
             let! tel = telView
             let! email = emailView
             match (tel, email) with
                 // If successfully validated for both, we can construct a View<Success<Person>>
                 | (Success t, Success e) ->
                     return mkPerson name t e |> Success
                 | _ ->
                     // If not, we concat the errors to get a failure
                     // This is the bit I'm not happy about -- would be much nicer to make this more
                     // general
                     return
                         DisplayFailure tel + DisplayFailure email
                         |> Failure
         }
 
 
     // Person -> Doc
     let showPerson p =
         Div0 [
             P0 [txt <| "Name: " + p.PersonName]
             P0 [txt <| "Phone Number: " + (showPhone p.PersonTelephoneNumber)]
             P0 [txt <| "EMail Address: " + (showEMail p.PersonEMailAddress)]
         ]
 
     // Result<Person> -> Doc
     let ShowResult personView =
         personView
         |> View.Map (fun personRes ->
             match personRes with
                 | Success p -> showPerson p
                 | Failure errs -> txt errs
         )
 
     // Form and main document
     let myForm =
         // Create variables
         let rvName = Var.Create ""
         let rvTel = Var.Create ""
         let rvEmail = Var.Create ""
 
         Div0 [
             Div0 [
                 // Create form controls
                 Div0 [
                     Html.Label ["for" ==> "nameBox"] [txt "Name:"]
                     Doc.Input ["id" ==> "nameBox"] rvName
                 ]
 
                 Div0 [
                     Html.Label ["for" ==> "telBox"] [txt "Telephone Number:"]
                     Doc.Input ["id" ==> "telBox"] rvTel
                 ]
 
                 Div0 [
                     Html.Label ["for" ==> "emailBox"] [txt "Email:"]
                     Doc.Input ["id" ==> "emailBox"] rvEmail
                 ]
             ]
 
             Div0 [
                 txt "Result"
                 Elements.Br [][]
                 // validateNum and validateEmail perform validation on the names and emails,
                 // producing View<Result<TelephoneNumber>> and View<Result<EMailAddress>>
                 PersonView (View.FromVar rvName) (validateNum rvTel) (validateEmail rvEmail)
                 |> ShowResult
                 |> Doc.EmbedView
             ]
         ]
 
     let Main =
         JavaScript.Log("Running JavaScript Entry Point..")
         Doc.RunById "my-container" myForm