I did manage to get server-side validation to work. I'm still hoping someone might come along with the correct, better, or auto-magic way to accomplish this.
In case anyone is having the same difficulties I was, here are the code changes I had to make to get it to work properly.
Controller Changes
[HttpPost]
public ActionResult Create(MyViewModel model)
{
if (!ModelState.IsValid)
{
var errors = new List<string>();
foreach (var modelState in ViewData.ModelState.Values)
{
errors.AddRange(modelState.Errors.Select(error => error.ErrorMessage));
}
return Json(errors);
}
return Json(new { success = true });
}
Create.cshtml Changes
<div id="errorContainer" class="alert alert-danger" style="display: none">
Validation issues:
<div id="errors"></div>
</div>
Index.cshtml Changes
function bindForm(dialog) {
$('form', dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
//traditional: true,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
showValidationErrors(false);
$('#simpleModal').modal('hide');
alert('Validation was successful.');
} else {
fillErrorList(result);
showValidationErrors(true);
}
}
});
return false;
});
function showValidationErrors(isShown) {
if (isShown) {
$("#errorContainer").show();
} else {
$("#errorContainer").hide();
}
}
function fillErrorList(errors) {
$("#errors").html("");
var list = document.createElement('ul');
for (var i = 0; i < errors.length; i++) {
var item = document.createElement('li');
item.appendChild(document.createTextNode(errors[i]));
list.appendChild(item);
}
$("#errors").html(list);
}