CODEWITHSUNDEEP
ajaxasp.net-mvc
Jagdish Chopde
Jagdish Chopde

Reputation: 211

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

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?

Upvotes: 1

Views: 1137

Answers (1)

TanvirArjel
TanvirArjel

Reputation: 32119

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>

Upvotes: 1

Related Questions