by default MVC use jquery unobtrusive validation lib to show validation message at client side. suppose i have small form with two textbox for first name and last name. when click submit button then client side validation will fire and display all validation message at once. but i want to display validation message one by one. now tell me where to customize the code and what code need to add or modify in js to make it possible.
here is my small sample code
namespace MVC_myfirst_Mvcapplication.Models
{
public class Person
{
public int ID { get; set; }
[Required]
[StringLength(30)]
public string First { get; set; }
[Required]
[StringLength(30)]
public string Last { get; set; }
public DateTime Birthdate { get; set; }
}
public class PersonContext : DbContext
{
public DbSet<Person> People { get; set; }
}
}
Controller : PersonController.cs
public class PersonController : Controller
{
PersonContext db = new PersonContext();
//
// GET: /Person/
public ActionResult Index()
{
var People = db.People.ToList();
return View(People);
}
//
// GET: /Person/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Person/Create
[HttpPost]
public ActionResult Create(Person Person)
{
db.People.Add(Person);
db.SaveChanges();
return RedirectToAction("Index");
}
}
View:
@model MVC_myfirst_Mvcapplication.Models.Person
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Person</legend>
<div class="editor-label">
@Html.LabelFor(model => model.First)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.First)
@Html.ValidationMessageFor(model => model.First)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Last)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Last)
@Html.ValidationMessageFor(model => model.Last)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Birthdate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Birthdate)
@Html.ValidationMessageFor(model => model.Birthdate)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
tell me which code i need to change in js to show validation message one-by-one in a specific div? thanks
$("form").validate().element(someElement);and test.valid()- refer this answer for an example (but why would you want to do this?)