MVC validation not working as expected in popup window - asp.net-mvc

Question

I'm trying to utilize the built-in validation in MVC and it doesn't appear to be working. If I leave the fields in my form empty I get back my "Successfully Saved." message.
Shouldn't the fields that are 'Required' be marked as required in the form?
Controller:
public ActionResult Create([DataSourceRequest] DataSourceRequest request, ACore.Asset assetForm)
{
var results = new
{
value = false,
Message = ""
};
if (ModelState.IsValid)
{
results = new
{
value = true,
Message = "Successfully Saved."
};
return Json(results);
}
results = new
{
value = false,
Message = "Please check the form values."
};
return Json(results);
}
View (condensed):
#using (Html.BeginForm("Create", "Asset", FormMethod.Post, new { id = "frmAsset"}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="tempStyle">
<div class="editor-label fl">
#Html.LabelFor(model => model.AssetName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.AssetName)
#Html.ValidationMessageFor(model => model.AssetName)
</div>
</div>
<div style="position: relative;">
<input type="button" value="Save" id="btnSave" />
</div>
JavaScript that handles my save:
var saveAsset = function (e) {
var form = $("#frmAsset");
$.ajax({
type: "POST",
url: "/Asset/Create",
data: $(form).serialize(),
success: function (data) {
if (data.value == true) {
alert(data.Message);
// Close popup window
var window = $('#AssetEditorPopUp').data("kendoWindow");
window.close();
// Refresh grid to show changes
$('#grid').data("kendoGrid").dataSource.read();
return;
}
alert(data.Message);
},
error: function () {
alert("There was an error editing the asset.");
}
});
};
Model:
public class Asset
{
[ScaffoldColumn(false)]
public int AssetId { get; set; }
[Required]
[Display(Name="Asset Name:")]
public string AssetName { get; set; }
public string AssetFormerName { get; set; }
public string Seg1Code { get; set; }
public string Seg3Code { get; set; }
public bool? ActiveFlag { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string State { get; set; }
public string AssetType { get; set; }
[Display(Name = "ZipCode:")]
[RegularExpression("([a-zA-Z0-9 .&'-]+)", ErrorMessage = "Enter only alphabets and numbers of First Name")]
public string ZipCode { get; set; }
}
This is what I get doing a POST rather than ajax.

Answer 1

your button is set to be of type button, it should be submit. you aren't firing the forms submit handler, so validation isn't being performed.
create your form like this:
#using (Html.BeginForm("Create", "Asset", FormMethod.Post, new { id = "frmAsset"}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="tempStyle">
<div class="editor-label fl">
#Html.LabelFor(model => model.AssetName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.AssetName)
#Html.ValidationMessageFor(model => model.AssetName)
</div>
</div>
<div style="position: relative;">
<input type="submit" value="Save" id="btnSave" />
</div>
Then you can use the following javascript:
$(function(){
$("#frmAsset").submit(function(evt){
var form = $(evt.currentTarget);
if(form.validate().isvalid()
{
// your handler here
}
evt.preventDefault(); // prevent the form from posting normally
return false;
};
};
I would look at the AJAX.BeginForm helper, it is more suited to what you are doing here.
nb. I haven't typed this in the ide, so i don't know if it is 100% valid, you will need to test it.