Question

I am trying to use client-side validation on a select element, but it’s not working when the form initially loads.

This is the property in my Model (this is actually inside a class inside my model):

[Required(ErrorMessage="Please select an application type.")]
public override string Application
{
    get
    {
        return base.Application;
    }
    set
    {
        base.Application = value;
    }
}

This is the part of the view

<div class="field_title">
    Application Type
</div>
<div class="field_validation">
    @Html.ValidationMessageFor(model => model.CreatePromocode.Application)
</div>
<div class="form_field">
    @Html.DropDownListFor(model => model.CreatePromocode.Application,
        SharedLibrary.Entities.DropDownLists.PromocodeApplicationOptions,
        "Select an application type...")
</div>

This is the dropdownlist items code, I’m doing it this way so I can use it on other applications and just change it in one place rather than in several

public class DropDownLists
{        
    public static List<SelectListItem> PromocodeApplicationOptions
    {
        get
        {
            return new List<SelectListItem>()
            {
                new SelectListItem() { 
                    Text="Earlybird Registration", Value="Earlybird"},
                new SelectListItem() { 
                    Text="Standard Registration", Value="Standard"},
                new SelectListItem() { 
                    Text="Monday Registration", Value="Monday"},
                new SelectListItem() { 
                    Text="Tuesday Registration", Value="Tuesday"},
                new SelectListItem() { 
                    Text="Wednesday Registration", Value="Wednesday"},
                new SelectListItem() { 
                    Text="Multiple Tickets", Value="TicketMany"},
                new SelectListItem() { 
                    Text="Single Ticket",Value="TicketSingle"}
            };
        }
    }
}

The problem I am having is that when a user first arrives on the page, the drop down list does not have any client-side validation attributes. It looks like this

<select id="CreatePromocode_Application" name="CreatePromocode.Application">

Once the form is posted however, and the ModelState is invalid because the application type hasn’t been selected, the client validation then appears on the drop down list and works fine.

<select data-val="true" 
    data-val-required="Please select an application type." 
    id="CreatePromocode_Application"
    name="CreatePromocode.Application" 
    class="valid">

How can I get client-side validation working from the beginning? I would rather not have to manually add required attributes and error messages because it kind of defeats the purpose of using data annotations.

Answer 1

Make sure you are initializing the CreatePromoCode property of your view model as in the default constructor of this sample:

public class YourViewModel
{
    public YourViewModel()
    {
        CreatePromoCode = new CreatePromoCode();
    }

    public BaseCreatePromoCode CreatePromoCode { get; set; }

}

public class BaseCreatePromoCode
{
    public virtual string Application { get; set; }

}

public class CreatePromoCode : BaseCreatePromoCode
{
    [Required]
    public override string Application { get; set; }
}

The HtmlHelper will use the runtime type of the CreatePromoCode property of your view model in order to get the metadata for its properties and set the data attributes for the client side validation. (So the validation will work even when the Required attribute is actually set only on the derived class.)

When there are errors after the initial posting, the MVC binder has created instances of the view model and the CreatePromoCode objects. If you render again the view for errors to be displayed, as the object has been initialized the data attributes will be set and the client validation starts working.