Peter, Witold and David, Thanks to all of you for having taken time out to reply to a novice!
@ Peter : Your comment was an eye-opener. This wasn't obvious to me at all because I am still to wrap my head around the FRP paradigm... @ Witold : Your detailed reply is nothing short of exceptional. Thanks for being so patient and writing out that nice reply. I have read it many times already... @ David : This is indeed something that I should have seen earlier as Witold also pointed out. I tried going back with all your comments and suggestions and redoing the exercise and failed again. I now feel like cheating and asking for the solution. My guess is that my sequential programming mindset is acting as a blocker. Could you please help with how you would achieve the button press validation? I am at a loss to see how I can set up all of the model, update and view to do this. By the way, the idea is to have a validation of the form done ONLY AFTER the submit button has been pressed. I would love to know how this solution would be attempted by a seasoned/professional programmer. This is what I tried... import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onInput, onClick) import String main = Html.beginnerProgram { model = model, view = view, update = update } -- MODEL type alias Model = { name : String , age : String , password : String , passwordAgain : String , flag : Bool } model : Model model = Model "" "" "" "" False -- UPDATE type Msg = Name String | Password String | PasswordAgain String | Age String | SetFlag unsetFlag : Model -> Model unsetFlag model = { model | flag = False} update : Msg -> Model -> Model update msg model = case msg of Name name -> { model | name = name } unsetFlag model Age age -> { model | age = age} unsetFlag model Password password -> { model | password = password } unsetFlag model PasswordAgain password -> { model | passwordAgain = password } unsetFlag model SetFlag -> { model | flag = True } -- VIEW view : Model -> Html Msg view model = div [] [ input [ type_ "text", placeholder "Name", onInput Name ] [] , input [ type_ "text", placeholder "Age", onInput Age ] [] , input [ type_ "password", placeholder "Password", onInput Password ] [] , input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] [] , div [] [button [ onClick SetFlag ] [text "Submit"] ] , viewValidation model ] viewValidation : Model -> Html msg viewValidation model = if model.flag == True then let (color, message) = if Result.withDefault 0 (String.toInt model.age) <= 0 then ("red", "Funny Age") else if String.length model.password < 9 then ("red", "Password too short") else if model.password == model.passwordAgain then ("green", "OK") else ("red", "Passwords do not match!") in div [ style [("color", color)] ] [ text message ] else let (color, message) = ("white", "") in div [ style [("color", color)] ] [ text message ] -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.