Check ModelState in Javascript code RSS

• • Reply
  rkrex

  Member

  282 Points

  298 Posts

  Check ModelState in Javascript code

  May 07, 2020 06:09 PM|rkrex|LINK

  I have this code in my index.cshtml. I have a loader indicator that i want to show on this page before the view that displays the table i load with data from a sql procedure. The problem is the loader is displaying if there is a delay in showing the view with the data, as a result of an error in the ModelState. My question is how do I check if ModelState is valid in the this Javascript code before showing the Loader.... 

  @section Scripts { <script> $("#form-id").on("submit", function ()

  { $("#divLoading").show(); });

  </script>

  }before I display the view with the table with sql data. Thanks !!!!

  @model ShowSSN.Models.ShowSSNModel
  
  @{
      ViewBag.Title = "Show SSNs";
  }
  <div class="alert alert-@ViewBag.Status alert-dismissable">
      <a href="#" class="close" data-dissmiss="alert" aria-label="close">&times;</a>
      @ViewBag.Message
  </div>
  
  <h2>@ViewBag.Title</h2>
  
  
  @using (Html.BeginForm("ShowSSN", "ShowSSN", FormMethod.Post, new { id = "form-id" }))
  {
      @Html.AntiForgeryToken()
  
      <div class="form-horizontal">
          <hr />
          <div class="col-xs-12">
              @Html.ValidationSummary(true, "An error has occured.", new { @class = "text-danger" })
          </div>
          <div class="form-group">
              <div class="col-md-10">
                  @Html.LabelFor(model => model.SSN)
                  @Html.TextBoxFor(model => model.SSN, new { @class = "form-control", maxlength = "9" })
                  @Html.ValidationMessageFor(model => model.SSN, "", new { @class = "text-danger" })
              </div>
          </div>
         <div class="form-group">
              <div class="col-xs-3">
                  @Html.Label("Vicky: ")
                  @Html.RadioButtonFor(model => model.connectionString, "Vicky")
              </div>
              <div class="col-xs-3">
                  @Html.Label("Dalton: ")
                  @Html.RadioButtonFor(model => model.connectionString, "Dalton")
              </div>
  
              @Html.ValidationMessageFor(model => model.connectionString, "", new { @class = "text-danger" })
          </div>
          <div class="form-group">
              <div class="col-md-10">
                  <input type="submit" value="Show SSN's'" class="btn btn-default" />
              </div>
          </div>
          <div id="divLoading" hidden>
              <img src="~/Content/loadinggif.gif" />
          </div>
          @section Scripts {
          <script>
              $("#form-id").on("submit", function ()
              {
               $("#divLoading").show();
               });
          </script>
  
          }
  
          <style type="text/css">
              #divLoading{
                            position: fixed;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            transform: -webkit-translate(-50%, -50%);
                            transform: -moz-translate(-50%, -50%);
                            transform: -ms-translate(-50%, -50%);
                          }
          </style>
      </div>
  }
  

• • Reply
  mgebhard

  All-Star

  53041 Points

  23626 Posts

  Re: Check ModelState in Javascript code

  May 07, 2020 06:25 PM|mgebhard|LINK

  rkrex

  My question is how do I check if ModelState is valid in the this Javascript code before showing the Loader.... 

  ModelState is a server construct not JavaScript.  Validate the inputs in JavaScript/jQuery or whatever validation framework you are using.

• • Reply
  bruce (sqlwo...

  All-Star

  58204 Points

  15661 Posts

  Re: Check ModelState in Javascript code

  May 07, 2020 07:37 PM|bruce (sqlwork.com)|LINK

  i assume you mean check validation, so the loading doesn't show when post back does not happen.  it appears you are using unobstrusive valuation, which uses jquery validation, so you just check if valid:

  <script>
     $("#form-id").on("submit", function () {
        if ($("#form-id").valid()) $("#divLoading").show();
     });
  </script>

  bruce (sqlwork.com)
• • Reply
  YihuiSun

  Contributor

  2750 Points

  781 Posts

  Re: Check ModelState in Javascript code

  May 08, 2020 07:11 AM|YihuiSun|LINK

  Hi,   rkrex

  According to your needs, I suggest you to check the following points.

  First, check whether you are using client validate correctly.

  • You should use validation rules in the model.

  [RegularExpression(@"^[a-zA-Z0-9]{4,16}$", ErrorMessage = "SSN must be 4 to 16 digits, including letters and numbers.")]

  • Check if your web.config has the following configuration.

  <add key="ClientValidationEnabled" value="true" />
  
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />

  • Check whether the two files 'jquery.validate.js' and 'jquery.validate.unobtrusive.js' are already referenced on your page.

  Second, you just need to modify your code according to @ bruce's solution.

  Here is the result.

  

  Best Regards,

  YihuiSun

   

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.