I am trying to handle errorPlacement JQuery Validate plugin in ASP.NET MVC 3 Project with Unobtrusive validation provided by Microsoft. I am never able to hit the errorPlacement function and I am not sure what am I doing wrong. I am providing the code for Model/View/Controller below. Please let me know what am I doing wrong?
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Project.Models.SampleModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
</head>
<body>
<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#form").validate(
{
errorPlacement: function (error, element)
{
alert("Code to define customer error");
}
})
});
</script>
<% using (Html.BeginForm("Index", "Sample", FormMethod.Post, new { id = "form" }))
{ %>
<%: Html.ValidationSummary(false) %>
<fieldset>
<legend>NewModel</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.Name) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.Name) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Age) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.Age) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Address) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.Address) %>
</div>
<br />
<p>
<input type="submit" id="submit" value="Submit" />
</p>
</fieldset>
<% } %>
</body>
</html>
Model
public class SampleModel
{
[Required]
[DataType(DataType.Text)]
[DisplayName("Name")]
public string Name { get; set; }
[Required]
[DataType(DataType.Text)]
[DisplayName("Age")]
public string Age { get; set; }
[Required]
[DataType(DataType.MultilineText)]
[DisplayName("Address")]
public string Address { get; set; }
}
Controller
public class SampleController : Controller
{
//
// GET: /New/
public ActionResult Index()
{
return View();
}
}
Best Answer
I found an article here which addresses the issue.
In short: