Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    List All Validation Errors at the top of an Elm Form

    Enrico BuonannoEnrico Buonanno

    If you validate errors on submit, and have a very long form that may not fit on the screen, you can list all errors at the top of the form, to inform the user of everything she must fix before trying to resubmit.

    elmElm
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:01 sometimes, you might get a requirement to list all the validation errors at top of your form. This can be helpful if the form is very long, it might not fit on one page and especially if you're not validating on blur.

    00:14 Let's see how we could go about implementing this feature. Let's go to the view and where we're building the header section. Let's add a new element, which I'll call list errors. I'll pass this to model for which it can get the errors.

    00:29 I'll define this here. First, let me list all the fields in the model, everything that might have errors associated. Next, let me find out all the errors. Let me start with fields which is a list. I use list.map. I could map the extract error function. This will extract the error for each field.

    01:11 Now, the problem is that extract error returns a maybe. Errors at this moment will be a list of maybes. What I still need to do is to get rid of all the maybes that are nothing and just keep the errors that are there.

    01:23 For this, I can use a function called to list. To list is a function that converts a maybe into a list. If the maybe is nothing, it would be an empty list. If the maybe is just, then it would be a list with that one element.

    01:39 But now, this is a function that returns a list. If I map that onto a list, what I get is a list of lists. To flatten that into a list instead of map, I can use another function. That's called concat map. In standard functional programming jargon, that will be called bind.

    01:56 The to list function is not available in the core library. For this, I need to install an additional package. Let me type Elm package install Elm community. That's the author. The package is called maybe extra. These are just some useful function for working with maybe values. Now in my code, I need an additional import.

    02:29 Now, I can finish implementing the list errors function. Now, I have a errors that's a list of strings. I can say if it's an empty list, then I just return an empty HTML note, text with empty string. Otherwise, I return a div with some text that says, "Please fix the following errors," and then a numbered list.

    03:11 Here, I'll have my errors. I will map those with list.map. I'll map a function called create list item. Let me find this here. It will take a string. It'll return a list item with the string inside. I have a typo here, concat map.

    03:49 Now, the compiler is complaining because this fields list that I've created mixes different types. I have accept policy that's a field of bool. The others are fields of string. This doesn't work.

    04:01 To fix this, let me do extract error here. Here, I just need to do to list. I don't need parentheses anymore. Let's just call this errors. Now it compiles.

    04:20 Let's see if I submit with everything wrong. Then you see at the top of the form, we get this list with all the errors. If I fix the errors, you see that the list is updated accordingly. That's because we're validating on input...

    Discuss

    Discuss