Trigger modal if submitting valid form in ASP.NET MVC 5 application?

Question

I am creating an ASP.NET MVC 5 application. There is a long wait time between the user clicking the "submit" button and the next page to load, so I would like a "please wait" modal to pop up only if the user has submitted a valid form.

I have tried the following code, which causes the modal to pop up no matter if the form is valid or not:

$('form').submit(function () {
    $('#waitingModal').show();
});

My application utilizes the jQuery Validate plugin and unobtrusive validation which both came with creating a MVC application, so I tried this code:

$('form').submit(function () {
    if ($(this).valid()) {
      $('#waitingModal').show();
    }
});

But I am getting the following error:

TypeError: $(...).valid is not a function

The NuGet Manager says that I am working with jQuery version 1.11.1, jQuery Validate 1.11.1, and jQuery Unobtrusive 3.2.3.

Am I missing something in my code? Is there another approach?

["validate() needs to be called on the form before checking it using this method"](https://jqueryvalidation.org/valid/). Try calling `.validate()` on your form element before checking if it's `.valid()`. — Aaron Eveleth, Oct 12 '17 at 17:17
Thanks Aaron! Not only was that an issue, but I also had to rearrange my script tags. Now everything is working perfectly. Wish I understood the script tag reason, but at least the .validate() makes sense! — cryan, Oct 12 '17 at 17:35
@AaronEveleth, **DO NOT** call `.validate();` - The `jquery.validate.unobtrusive.js` plugin already has called that and it can only lead to other problems (this issue is the order of the scripts) — , Oct 12 '17 at 21:34
@StephenMuecke I was only quoting the documentation, which I linked. If what you say is true, then it should be updated in the docs. I have no way of knowing this, I don't use this plugin. Could lead to more confusion in the future if not updated. — Aaron Eveleth, Oct 13 '17 at 20:30
@AaronEveleth,Your quoting from the `jquery.validate` documentation (and if that is all OP had it would be fine). The `jquery.validate.unobtrusive.js` plugin already calls that method and configures `jquery.validate` (add the rules etc based on the `data-val-*` attributes generated in the view) — , Oct 13 '17 at 20:42

cryan · Answer 1 · 2017-10-13T13:26:15.970

Thanks to your comments and this post, I was able to solve my problem. Posting a solution here for anyone else who runs into this issue...

I added .validate() to my code like so:

$('form').submit(function () {
  $(this).validate();
  if ($(this).valid()) {
     $('#waitingModal').show();
  }
});

But ran into to the same error:

TypeError: $(...).validate is not a function

After Googling and finding this post, I thought I'd try rearranging my script tags. Even though my jQuery script tag resides in my Layout.cshtml, I needed to move my script tag to jQuery Validate on the form's view to the bottom of the script tag list. Now the modal is popping up exactly how I would like it to.

EDIT

Per another user's comment, I removed .validate(); from my code. So my code is back to this:

$('form').submit(function () {
  if ($(this).valid()) {
     $('#waitingModal').show();
  }
});

Just as the user said, the code ran perfectly fine without the .validate(); Turns out my only issue was the order of my script tags.

Ortsbo · Answer 2 · 2017-11-03T05:08:37.743

You need to use the Ajax Callback function of JQuery. It maybe a Http Post or Get Call. For your "submit" scenario, It's should be a POST call.

For example:

var element = $('#dialogContent');
element.html('please wait...');
element.dialog("open");

$.ajax(url, {
                data: { "_": $.now() },
                contentType: 'text/html',
                dataType: 'html',
                type: 'POST'
            }).done(function (data) {
                        setTimeout(function () {
                            element.html(data);
                        }, 100);
                        return false;
            }).fail(function (error) {
                     element.html('Show error information here..');
            }
       );

Trigger modal if submitting valid form in ASP.NET MVC 5 application?

2 Answers2

Linked