Html.ValidationSummary Question RSS

• • Reply
  

  NickKA

  Member

  115 Points

  243 Posts

  Html.ValidationSummary Question

  Apr 26, 2012 08:42 PM|LINK

  I have a validation like this:

  @{ ViewContext.FormContext.ValidationSummaryId = "valSumId";}
  @Html.ValidationSummary(false, "Please fix these errors.", new Dictionary<string, object> { { "id", "valSumId" } })

  I have a submit button on my form that fires a javascript function:

      $(function () {
              $("#submit").click(function () {
                  onSubmit();
              });
          });
  
       function onSubmit() {
               $('#loading').toggle();
               $('#loadingspinner').empty();
               $('#loadingspinner').append('<h3 style="text-align: center;">Please Wait...</h3><p />');
               $('#loadingspinner').append('<img alt="Please wait" src="/images/spinner_big.gif" style="display: block;margin-left: auto; margin-right: auto;" />');
           }

  If the validation fails, the submit does not go to the controller's action. The validations that failed are displayed.

  I now have a spinner.gif being displayed and I want it to go away if validation fails. How do I accomplish this?

  I have a function that I can call to make the spinner go away but no event to call the function on.

           function onSubmitCancel() {
               $('#loading').toggle();
               $('#loadingspinner').empty();
           }

  
  
  
  

  • Edited by NickKA on Apr 26, 2012 08:44 PM
  • Edited by NickKA on Apr 26, 2012 08:47 PM
• • Reply
  

  RogerH

  Member

  354 Points

  73 Posts

  Re: Html.ValidationSummary Question

  Apr 26, 2012 08:58 PM|LINK

  You want to call onSubmit() during the submit function of the form (which should only fire when the form is about to be submitted) and not on the click event for the button (which fires every time).

  So instead of $("#submit").click use $("form").submit or similar.

• • Reply
  

  NickKA

  Member

  115 Points

  243 Posts

  Re: Html.ValidationSummary Question

  Apr 26, 2012 09:09 PM|LINK

  That is not going to work. I want the spinner.gif to be visible when the submit goes through. What I am looking for is a way to make the spinner.gif be not visible when the submit fails and the Validation error are displayed.

• • Reply
  

  RogerH

  Member

  354 Points

  73 Posts

  Re: Html.ValidationSummary Question

  Apr 26, 2012 09:13 PM|LINK

  Are you saying that you are submitting the form via ajax? Because otherwise if you are doing a standard post back to the server the validation should trigger immediately and your submit() binding should never happen (so there's no need to "hide" your loading message), unlike your click() binding which will happen whether the form is valid or not.

• • Reply
  

  NickKA

  Member

  115 Points

  243 Posts

  Re: Html.ValidationSummary Question

  Apr 26, 2012 09:18 PM|LINK

  You are confusing the issue entirely. I am only concerned with calling my javascript function to disable the spinner.gif if validation fails and the validation errors are displayed. I believe that I described everything in my first post.

• • Reply
  

  RogerH

  Member

  354 Points

  73 Posts

  Re: Html.ValidationSummary Question

  Apr 26, 2012 09:22 PM|LINK

  Why would the spinner ever appear if validation failed? Wouldn't you just not show the spinner if until the form is submitted and validation was successful?

• • Reply
  

  NickKA

  Member

  115 Points

  243 Posts

  Re: Html.ValidationSummary Question

  Apr 26, 2012 09:39 PM|LINK

  I now understand where you are coming from and I agree with you, however I can't get the following to fire:

  $('#myform').submit(function (e) {
              alert("onSubmit");
              onSubmit();
          });

  Any ideas what I am doing wrong?

  Here is the submit button:

  <input name="submit" id="submit" type="submit" value="Save" style="cursor:pointer" />

  • Edited by NickKA on Apr 26, 2012 09:41 PM
• • Reply
  

  RogerH

  Member

  354 Points

  73 Posts

  Re: Html.ValidationSummary Question

  Apr 26, 2012 10:40 PM|LINK

  Are you sure the selector for the form tag is right? Is the form id "myform"? Also make sure that the form is validating and that no other javascript on the page is preventing the submit event from bubbling up.

• • Reply
  

  NickKA

  Member

  115 Points

  243 Posts

  Re: Html.ValidationSummary Question

  Apr 27, 2012 02:08 PM|LINK

  I got it to work but not using the actual id of the Html.BeginForm, I used this and this works:

  $(function () {
              $("form").submit(function (e) {
                  alert("onSubmit");
                  onSubmit();
              });
          });

  But this event fires even when the form does not validate. I either need to find a way for this event not to fire if the form does not validate or be able to check inside the event if the form validated. How do I do this?

   

  • Edited by NickKA on Apr 27, 2012 02:09 PM
  • Edited by NickKA on Apr 27, 2012 02:09 PM
  • Edited by NickKA on Apr 27, 2012 02:25 PM
  • Edited by NickKA on Apr 27, 2012 02:28 PM
• • Reply
  

  NickKA

  Member

  115 Points

  243 Posts

  Re: Html.ValidationSummary Question

  Apr 30, 2012 02:09 PM|LINK

  Unlike what I was told, the submit event is fired even if the validation fails. The submit does not reach the controller if the validation fails. The only way to not enable the spinner.gif that I am displaying is this:

  $(function () {
             $("form").submit(function (e) {
                 if ($('.input-validation-error').size() == 0) {
                     onSubmit();
                 }
             });
         });

  • Marked as answer by NickKA on Apr 30, 2012 02:09 PM