Validating MVC Form with Multiple Tab

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><a href="#tabs-household">Household</a></li>
               <li><a href="#tabs-financial">Financial</a></li>
               <li><a href="#tabs-medical">Medical</a></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.
      }
  }

Paul Abbott · Accepted Answer · 2017-05-03 22:04:00Z

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>

answered May 3, 2017 at 22:04

Paul Abbott

7,2213 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Validating MVC Form with Multiple Tab

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related