I'm trying to display the loading image when the server is processing. 

It actually works fine when I haven't made any mistakes when filling the form, but when I miss a required field 

for example, the loading image pops up and it doesn't go away and the validation of the field is made.

 I've tried to use jQuery to do something like this:

    $(function () {
   
$("#button").click(function () {
   
alert(form.valid());
    if (form.valid())
{
       
$("#divLoading").show();
        $.post({
            type:'POST',
            url: url,
            data:data,
            success:
function (data) {
               
$("#divLoading").hide();
            }
        });
    } else {
       
alert("Not valid.");
    }
    //}
});
});

So, when I ask if the form is valid it returns true, in spite of leaving a required field blank. 

My model is the following: 

    public class MotivoDTO
    {
        public MotivoDTO()
        {
        }
       
[Required(ErrorMessage = "You must enter a Motive.")]
       
[DataType(DataType.Text)]
        [Display(Name= "Descripcion")]
        public string Descripcion { get; set; }
 
    }

Thank you!