Validating MVC Form with Multiple Tab - asp.net-mvc

Question

I have this form with couple tabs that I needed to validate. Here is the issue I am encountered. I wanted to direct the user back to the "Tab Page" where required fields were not entered. For an example, if the user didn't select any of the Financial Section of selection then the Financial Tab page will shows the error message.
Here is the View page
#using CalFresh.Models
#model CalFresh.Models.calfreshByWorkUnitID
#using (Html.BeginForm())
{
<form id="msform" class="form-inline" method="post">
<div id="TabsSetMain">
<table>
<tr>
<td>Some reviewer info</td>
</tr>
</table>
</div>
#*--------------------- Sub Tabs (Household/Financial/Medical)-----
<div id="TabsSet1">
<ul id="progressbar">
<li>Household</li>
<li>Financial</li>
<li>Medical</li>
</ul>
</div>
#*-------------------- Household Tab -----------------
<div id="tabs-household">
<table>
<tr>
<td>Was the SSN Verified?</td>
#{
List<SelectListItem> listItems = new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = " -- Select One -- ",
Value="",
Selected = true
});
listItems.Add(new SelectListItem
{
Text = "Yes",
Value="Yes"
});
listItems.Add(new SelectListItem
{
Text = "No",
Value="No"
});
}
<td>
#Html.DropDownListFor(model=>model.tempHouseHoldSSNVerification, listItems, new {#class="form-control", value=Model.tempHouseHoldSSNVerification})
#Html.ValidationMessageFor(model=>model.tempHouseHoldSSNVerification, null, new {style="color:red"})
</td>
</tr>
</table>
</div>
#*-------------------- Financial Tab -----------------
<div id=tabs-financial">
<table>
<tr>
<td>
Was an error found for earned income calculation?
</td>
<td>
#Html.DropDownListFor(model=>model.tempFinancialEarnIncome, listItems, new {#class="form-control", value=Model.tempHouseHoldSSNVerification})
#Html.ValidationMessageFor(model=>model.tempFinancialEarnIncome, null, new {style="color:red"})
</td>
</tr>
</table>
</div>
</form>
}
<script>
$(function () {
$("#TabsSetMain").tabs();
});
</script>
<script>
$(function () {
$("#TabsSet1").tabs();
});
</script>
Here is the class page
using System;
using System.ComponentModel.DataAnnotations;
namespace CalFresh.Models
{
public class calfreshByWorkUnitID
{
[Required(ErrorMessage = "Please select Household SSN verification.")]
public string tempHouseHoldSSNVerification { get; set; }
[Required(ErrorMessage = "Please select Financial Income Calculations.")]
public string tempFinancialEarnIncome { get; set; }
}
}
Here is the Controller code
using System;
using System.Configuration;
using System.Linq;
using System.Web.Mvc;
using System.Net;
using System.Data;
using CalFresh.Models;
namespace CalFresh.Controllers
{
public string pubTempHouseHoldSSNVerification;
public string pubtempFinancialEarnIncome;
[HttpPost]
public ActionResult Add(calfreshByWorkUnitID customerinfo)
pubTempHouseHoldSSNVerification = customerinfo.tempHouseHoldSSNVerification;
pubtempFinancialEarnIncome = customerinfo.tempFinancialEarnIncome;
if (ModelState.IsValid)
{
#* Process my insert script here.
}
}

Answer 1

Model state is available in the view via ViewData.ModelState. I don't know what tab library you are using, but somewhere you will need to check which fields are invalid in the model state, figure out which tab they are on, and set focus on that tab.
You should be able to get the fields with errors using something like
ViewData.ModelState.Where(fld => fld.Value.Errors.Count > 0)
or to check individual fields,
ViewData.ModelState.IsValidField("FIELD_NAME")
If you can't set the tab that has focus using css or some sort of tag server side, you'll need to dump the fields with errors into a javascript variable and go from there.
<script>
var errors = '#string.Join(",", ViewData.ModelState.Where(x => x.Value.Errors.Count > 0).Select(fld => fld.Key))';
....
</script>