This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Validate that a Checkbox is Checked in an Elm Form

    Enrico BuonannoEnrico Buonanno

    Our revised model allows us to validate fields of any type, such as checkboxes that have the type of Bool.

    In this lesson, for ease of demonstration, we'll replace the age field with an "accept policy" checkbox with the Bool type.

    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 in our revised model, we have this role type parameter that is the type of the data returned from the UI. We can now handle not only strings but also other types. To demonstrate this, let me add a checkbox on a form that the user must check before the form is submitted.

    00:18 Let's change the model. We'll call this accept policy. It's field of bool and bool.

    00:28 To keep the application reasonably small, let me remove the age field. In our initial model, we'll have accept policy, initialize as a field with value false, and I have a new message type, check accept policy with a payload of type bool.

    00:53 Here I'm going to handle this message. When we've added it to model, let me replace these. The field is not optional. We have a check to validate that this is true. The error otherwise is, "You must accept the policy."

    01:28 Here we do need to pass this into the function, even though we actually disregard this parameter. This is because we want to use the applicative behavior to ensure that everything on the model is valid.

    01:50 To create the checkbox, it's still an input, but the type is checkbox. The value comes from the model, but now the raw value is a boolean, so we need to convert it to string. The event is no longer on input but on check, and the message type to use is check accept policy.

    02:21 This just renders the checkbox itself, so we need a little label next to it. Let me put the error label in a div on its own so that it appears below the checkbox.

    02:45 Now let me fix a couple of compiler errors. Here I had a parentheses left from before.

    03:02 Then the function is true, I've not defined yet. Let me do that.

    03:10 This is validator from bool to bool, but we also want to take an error message which is just a string. It's quite simple. If B, then OK B. Else, error with err.

    03:35 Here I also need to import the on check function. I use this name. I want to use the underscore to signify that I'm ignoring this parameter and yet give it a name, but this is invalid, so let me just use the underscore.

    03:53 Now the code compiles. We have our checkbox appearing here. If I click submit, you see that I get a validation error that says, "You must accept the policy." You can also see this in the model that the field is an invalid state.

    04:07 If I check it and I click submit, then notice that the field goes to valid.

    Discuss

    Discuss