How to properly handle and display ASP.NET MVC API validation errors in AJAX responses? [closed]

Question

I’m implementing AJAX-based teacher updates in an ASP.NET MVC 5 application with server-side validation. While my API correctly returns validation errors (e.g., 400 Bad Request with ModelState), I can’t reliably display these errors in the browser.

What I Tried

1. Manual Error Parsing:

   error: function(xhr) { const errors = xhr.responseJSON?.ModelState; if (errors) { for (const [key, value] of Object.entries(errors)) { $(`#${key}`).after(`<div class="error">${value}</div>`); } } } 

   Problem: The nested ModelState structure (e.g., {"teacher.HireDate":["Invalid date"]}) makes field mapping messy.

2. Simplified API Response - modified the API to return a flattened format:

   return BadRequest(new { Errors = ModelState.Values.SelectMany(v => v.Errors) .Select(e => e.ErrorMessage) }); 

3. jQuery validation plugin:

   $("#teacherForm").validate({ submitHandler: function(form) { // AJAX submit } }); 

   Problem: doesn't integrate with server-side validation responses

What I expected

A clean way to:

• Extract field-specific errors from ModelState
• Dynamically display them under corresponding form inputs
• Maintain consistency with Bootstrap’s validation styles

Current code - API controller:

[HttpPut] [Route("api/teachers/{id}")] public IHttpActionResult UpdateTeacher(int id, [FromBody] Teacher teacher) { if (!ModelState.IsValid) { return BadRequest(ModelState); // Returns error object } // ... update logic } 

AJAX call:

$.ajax({ url: `/api/teachers/${teacherId}`, type: 'PUT', contentType: 'application/json', data: JSON.stringify(teacherData), success: function() { /* ... */ }, error: function(xhr) { // NEED HELP: Cleanly display errors here } }); 

Questions:

1. What’s the most maintainable way to map ModelState errors to form fields?

2. Should I reformat API errors or handle the default ModelState structure?

3. Are there libraries/plugins that simplify this workflow?

Environment:

• ASP.NET MVC 5
• jQuery 3.6
• Bootstrap 4