MVC3 Client Side Validation

See more:

MVC

I have a view "EmployeeEdit"
This view uses a partial view "_Roles"
The partial view is created with the following code:

@{Html.RenderAction("Roles", ViewData.Model);}

This all works fine and is not the issue I'm having.

I have a bit of java in _Layout that places an asterisk to the right of fields with the data annotation [Required]. See the RolesViewModel.
Again, this works fine.

The issue I have is that when the HandleDepartmentChange java code is executed.
The fields from the RolesViewModel are still validated on the client side, but I lose the asterisk next to the fields and I also lose the Validation Message, e.g.

@Html.ValidationMessageFor(o => o.SelectedRoleId).

Anyone have suggestions as to how I can get Validation Messages to appear after the HandleDepartmentChange java code is executed?

Here is the relevent bits of code:
_Layout.cshtml

<script type="text/javascript">
    // Client side validation for the [Required] data annotation.
        $(function () {
            $('[data-val-required]').after('<span class="required-indicator"> *</span>');
        });
</script>

_Roles.cshtml

@model HR_Portal.ViewModels.RolesViewModel 

<fieldset>
    <span class="SpanTextboxEdit">
        @Html.Label("roleName", "Role Name")
        <br />
        @Html.DropDownListFor(m => m.SelectedRoleId, new SelectList(Model.Roles,"RoleId","RoleName", @Model.SelectedRoleId)
                     , "--- Select a Role ---", new { @Class = "EditField", title = "Select the Role", id = "roleDropDown", @onchange = "HandleRoleChange(this);" })
        @Html.ValidationMessageFor(o => o.SelectedRoleId)
    </span>

    <span class="SpanTextboxEdit">
        @Html.LabelFor(o => o.EmployeeTitle)
        <br />
        @Html.EditorFor(o => @Model.EmployeeTitle, new { @Class = "EditField", style = "width: 300px", title = "Enter the Employee's Title" }) 
        @Html.ValidationMessageFor(o => o.EmployeeTitle)
    </span>
</fieldset>

EmployeeEdit.cshtml

@model HR_Portal.ViewModels.EmployeeViewModel

@using (Html.BeginForm("SaveEmployeeAction", "Employee", FormMethod.Post, new { id = "employeeEditForm", Model }))
{
	...
	<fieldset>
		<span class="SpanTextboxEdit">
            @Html.Label("department", "Department")
            <br />
            @Html.DropDownListFor(m => m.DepartmentFolderId, new SelectList(Model.Departments, "EFolderId", "DepartmentName", @Model.DepartmentFolderId)
                , "--- Select a Department ---", new { @Class = "EditField", title = "Select the Department Name", @onchange="HandleDepartmentChange();"})
            @Html.ValidationMessageFor(o => o.DepartmentFolderId)
         </span>

         <span class="SpanTextboxEdit" id = "spanRoles">
            @{Html.RenderAction("Roles", ViewData.Model);}
         </span>
    </fieldset>
}

<script type="text/javascript">
    function HandleDepartmentChange() {
        var departmentFolderidId = $('#DepartmentFolderId').val();
        var title = $('#EmployeeTitle').val();
        $.get('@Url.Action("RefreshRoles")', { id: departmentFolderidId, title: title }, function (data) {
            $('#spanRoles').html(data);
            $('#spanRoles').fadeIn('slow');
        });
    }
</script>

EmployeeController

    public PartialViewResult RefreshRoles(String id, String title)
    {
        var model = new RolesViewModel();
        model.Roles = GetRoles(id);
        return PartialView("_Roles", model);

    }

    public PartialViewResult Roles(EmployeeViewModel viewModel)
    {
        var model = new RolesViewModel();
        String roleId = viewModel.RoleId.ToString();
        model.Roles = GetRoles(id);
        model.SelectedRoleId = viewModel.RoleId.HasValue ? viewModel.RoleId.Value : Guid.Empty;

        return PartialView("_Roles", model);
    }


public class RolesViewModel
{
    [Required]
    public Guid SelectedRoleId { get; set; }
    public IList<Roles> Roles { get; set; }

    [Display(Name = "Role")]
    public String RoleName { get; set; }


    [Required]
    [Display(Name = "Title")]
    public String EmployeeTitle { get; set; }
}