Show validation message while submitting form with ajax in ASP.NET MVC

Question

To be particular, in ASP.Net MVC project, I want to show loading image using jQuery when my form post to the server and next action method gets called, as post login, it takes too much time to load the next page.

I tried onclick() javascript method on submit button:

<input type="submit" onclick="jsFunction()">

Also the onsubmit() method of form:

<form onsubmit="jsFunction"> ... </form>

or

@using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { onsubmit = "jsFunction()" }))
{

In case of both, both gets called even there are local validation errors.

I have to show loading img only when the form the getting submitted to server post satisfying the local validation errors.

Any idea in what way this can be achieved?

Hook to the submit event through jQuery, not using the outdated on* event attributes. Then, assuming you're using unobtrusive validation, it will work fine. — Rory McCrossan
– Rory McCrossan, Commented Jan 27, 2019 at 12:00
@RoryMcCrossan, Tried it, but it's too getting called even if there are client site validation errors. and yes I am using unobstrusive validatoins: $("#formLogin").submit(function () { alert('hi'); }); — Jagdish Chopde
– Jagdish Chopde, Commented Jan 27, 2019 at 12:09

TanvirArjel · Accepted Answer · 2019-01-27 13:27:27Z

1

First add the id attribute value for your form as follows:

@using (Html.BeginForm("Save", "ReadingsEntry", FormMethod.Post, new { id = "yourFormId" }))
{
}

Now you can check whether your form is valid or not using jQuery as follows:

$(document).ready(function(){
    $("#yourFormId").on('submit',function(){
        if($("#yourFormId").valid())
        {
           // here write code to show loading image.
        }
   });
});

Make sure that your form view containing following script files:

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

edited Jan 27, 2019 at 13:27

answered Jan 27, 2019 at 13:22

TanvirArjel

32.4k14 gold badges89 silver badges120 bronze badges

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

4 Comments

Jagdish Chopde Over a year ago

Thanks a lot for your answer. It worked absolutely fine for me!

TanvirArjel Over a year ago

Great to hear that! Welcome.

Jagdish Chopde Over a year ago

Thanks again. I think in MVC "jquery.validate.min.js" & "jquery.validate.unobtrusive.min.js" are already added in bundles.

TanvirArjel Over a year ago

And that's why I told Make sure that your form view containing following script files: If reference from here then no need to add in again here.

Collectives™ on Stack Overflow

Show validation message while submitting form with ajax in ASP.NET MVC

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related