How to show loading icon after submiting the form but not in case the Model is not valid in ASP .NET MVC

Question

I want to show a loading-icon after submitting the form, but not if the View Model is not valid (I mean jQuery MVC validation).

        <input type="submit" class="btn btn-default" value="Register"/>
        <div class="work-con"></div>

If I use something like this

    $("#myform").submit(function (event) {
        // Animate loader
        $(".work-con").fadeIn("slow");
    });

it works fine, but it shows the icon even if the Model is not valid and the warnings are displayed.

Answer 1

MVC uses jQuery validation. You can use that to check if the form is valid:

$("#myform").submit(function (event) {

    var isValid = $('#myForm').valid();
    if (isValid) {    
        // Animate loader
        $(".work-con").fadeIn("slow");
    }
});