This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

ASP.NET MVC Forms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Displaying Validation Messages

5:31 with James Churchill

Let’s update our view so users can see error messages when they submit incomplete or invalid data.

Follow Along

To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this: 

git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v4.4 -b displaying-validation-messages

Validation Summary Section Styles

The first time that you add a validation summary section to an ASP.NET MVC project, you’ll notice that it always displays, even when the form is in a valid state and there no messages to display. Luckily, this is easy to fix. ASP.NET MVC will add a CSS class named validation-summary-valid to the summary section’s outer most

element. So, to hide the summary section we can just define a style for that class like this: 
.validation-summary-valid
{
    display: none;
}

That’s all there is to it!

In case you’re wondering, the Fitness Frog web app styles that were provided to you already includes this style, so that’s why we didn’t need to add it ourselves.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    As we've seen in earlier videos, 0:00
    our web app is validating user submitted data and generating error messages. 0:02
    But we're not displaying them on our ad entry view. 0:07
    Let's open and update our view so 0:10
    users can see error messages when they submit and complete or invalid data. 0:13
    We can add a validation summary section to our view 0:18
    by calling the ValidationSummary HTML helper method. 0:20
    I'll place the validation summary section between our heading and form. 0:25
    @Html.ValidationSummary. 0:29
    We can also display validation messages for 0:33
    individual fields by calling the validation message for HTML helper method. 0:35
    I'll update the activity field so that any validation messages for 0:40
    that field will display right below the drop down list, 0:45
    @Html.ValidationMessage(m=>m.ActivityID). 0:48
    Now let's run the app and test our view. 1:00
    Go ahead and save the form. 1:04
    And now we can see our validation messages. 1:08
    Notice how the Activity field required validation message 1:11
    is displayed both in the summary section and at the field level. 1:15
    There are two approaches, or strategies, that we could use for 1:21
    displaying our validation messages. 1:25
    Just use the summary section so all of our messages are displayed at the top of our 1:28
    form, or a combination of the summary section and field level messages. 1:33
    We shouldn't use field level messages by itself as it's possible for 1:39
    a message to not be associated with a field. 1:43
    So we need the summary section to display those global messages. 1:46
    If we're going to display field level messages, 1:50
    we can configure the summary section to only display global messages. 1:52
    To see this in action, let's start with adding a global validation message. 1:57
    Go ahead and stop the app and open the EntriesController class. 2:01
    Then navigate to the add post action method. 2:10
    I'll add a call to the model state add model error method, 2:21
    just above our duration field validation. 2:25
    ModelState.AddModelError then an empty string for 2:27
    our key to make this message global, then our message itself, 2:34
    this is a global message. 2:40
    For the first parameter, be sure to pass in an empty string instead of null. 2:44
    Passing in null will cause an exception to be thrown when calling the add 2:49
    model error method. 2:53
    Let's switch to Word view and update our summary section so 2:55
    that it only displays global messages. 2:58
    We can do that by passing in true for the exclude property errors parameter. 3:01
    Now let's run our app and save the form. 3:06
    Here's our global message in the summary section and 3:13
    the activity field message, but we're missing the duration message. 3:16
    The reason for this is simple, we didn't add a call to the validation message for 3:23
    HTML helper method for that field. 3:28
    So make sure that if you aren't going to display field level messages 3:30
    in the summary section, that you update each field to display its own messages. 3:34
    I'm going to just use the summary section. 3:39
    So, I'll remove the parameter from the validation summary method call and 3:41
    completely remove this validation message for method call. 3:46
    Let's also stop the app and 3:53
    remove from the controller our temporary global validation message. 3:54
    Before we wrap up this video, let's make a couple of changes to our summary section. 4:00
    First, let's add a message to display at the start of the summary 4:05
    by supplying a value for the message parameter. 4:09
    The following errors were found. 4:12
    Then, let's update the styling by passing in an anonymous object. 4:17
    With the class property for the second parameter, 4:22
    we can use the bootstrap C.S.S. classes alert and alert-danger. 4:26
    Let's press F5 to run and test our app one more time. 4:31
    Go ahead and save the form. 4:35
    Great, our messages display in the now nicely styled summary section. 4:39
    Select a value for the activity field and save the form again. 4:45
    Now we're seeing just the duration message at a value greater than zero for 4:51
    the duration field. 4:57
    And save the form. 4:59
    And we're back on the entries list page, and here's our new entry. 5:01
    Go ahead and stop the app. 5:06
    If you're using GitHub let's commit our changes. 5:10
    Enter a commit message of Added validation summary section. 5:15
    And click the Commit All button. 5:23
    Now that we have our server side validation in place, 5:26
    we'll work on implementing client side validation. 5:29

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up