jquery show processing image on submit button click but hide if css error class exists in the form

Question

I have the following jQuery code:

$("#signUpFormSubmitButton").click(function(){
$('#processing').show();
});

This works fine. When the submit button is clicked on the form, I show a processing spinning graphic.

I don't want to show the processing spinning graphic however, if there are errors on the form (form is not yet submitted). I validate my form with jQuery as well and I add a "error" css class to the form input fields if there is an error.

I want to use the css error class as the flag for this.

I tried:

if (!$("#myForm input").hasClass("error") ) {
    $('#processing').show();
}

But did not work. Any help greatly appreciated.

Answer 1

Try using the toggle() method and a simple selector

$("#signUpFormSubmitButton").click(function(){
    $('#processing').toggle($("#myForm input.error").length > 0);
});

toggle(showOrHide)

showOrHideA Boolean indicating whether to show or hide the elements.

Answer 2

if ($("#myForm input").hasClass("error") ) {
      //your error code here }
else {
      //your loading image
$('#processing').show(); }

Answer 3

You could try counting the number of elements with the .error class:

if ($("#myForm input.error").length != 0)
{
    $('#processing').hide();
} else {
  // Show your spinner here
}