Question

I am having issues with ‘required field’ validation messages appearing on the target form when it appears after I issue an ajaxRequest.

I am executing the ajaxRequest command from within a form to allow a partial view to be rendered within a different form (the two form’s are on the same page and are actually panes of a Telerik splitter).

// note "MyAjaxCall is passed (below) so that I can populate
// the partial view with the model data
splitter.ajaxRequest(".t-pane:last", "/HierarchyMember/Edit/" + hierarchyId, {requestType: "MyAjaxCall" });

My controller simply get the appropriate model data and returns a partial view

return PartialView(hierarchyMemberRepository.Find(hierarchyMember.Id);

Then within my partial view (named “Edit”) I render via an Ajax.BeginForm (also note that on Ready because the form is dynamically loaded, I am reloading unobtrusive validation)

@using (Ajax.BeginForm("Edit"
    , "HierarchyMember"
    , new AjaxOptions { OnBegin = "ajaxOnBegin", OnFailure = "ajaxOnFailure()"
        , HttpMethod = "Post", InsertionMode = InsertionMode.Replace
        , OnSuccess = "ajaxOnSuccess(data, $('#submitButtonClicked')[0].value)"
        , OnComplete = "ajaxOnComplete" }
        , new { id = "editForm", name = "editForm" }))
{
  @Html.ValidationSummary(false)
  ...
}
<script...>
    $(document).ready(function () {
        var form = $("#editForm");
        // for validation
        form.removeData("validator").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse(form);
    });
</script>

I am hence including jquery.validate.min.js, jquery.unobtrusive-ajax.min.js, jquery.validate.unobtrusive.min.js in my layout – within the ScriptRegistrar, I have tried the jQuery and jQueryValidation settings as true and false

<script src="@Url.Content("~/Scripts/2012.1.419/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>
...
@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false).DefaultGroup(group => group.Combined(true).Compress(true)))

To enforce mandatory fields I have a partial class extending the EntityFramework’s generated model class as follows

[Required()]
public object HierarchyId;
[Required()]
public object HierarchyDescription;

Note that both of the above fields in SQL Server are defined as NOT NULL (within the Entity Framework (4.1) the IsNullable flag within the property attribute is false.

The problem I have is that when the partial view first appears, all mandatory fields on the form have a “…required field” error message shown (regardless of whether the field contains a value or not). If I exclude the partial class with the ‘Required’ attributes above, the error messages go away but I don’t get clientside validation (hence I can enter blanks in non-nullable fields)

Does anyone have a resolution to this?

Answer 1

For anyone wondering why the above occurred, it is because the AJAX call went via the HTTP post route in my controller that accepted the full structure which included some [Required] field decorations

The resolution was to call a different method in the controller that accepted only those variables that were being passed and hence didn’t fail the validation and all was well