Browse existing classes in a form and remove

Question

I am creating a form with validation using the plugin jQuery Validation, the form already has a structure ready, and so I needed, to make sure that the successful error classes were added together to the class .form-group.

When the field is successfully validated add the class .is-Valid, however I am having trouble getting this class removed when the form is submitted, the way it is, the user sends, fields are cleared, but the green border still continues.

Remembering that the classes .is-Valid will be removed only within the form, avoiding removing in some other site location, if any.

$(".formulario").validate({
  rules: {
    nome: {
      required: true,
      minlength: 5,
      minWords: 1
    },
    email: {
      required: false,
      email: true
    },
    senha: {
      required: true,
      minlength: 8
    },
    confirmar_senha: {
      required: true,
      equalTo: "#senha"
    }
  },
  messages: {
    nome: {
      required: "Por favor, informe seu nome"
    },
    email: {
      required: "É necessário informar um email"
    },
    senha: {
      required: "Informe uma senha"
    },
    confirmar_senha: {
      required: "As senhas não conferem",
      equalTo: "O campo confirmação de senha deve ser identico ao campo senha."
    }
  },
  errorElement: "span",
  errorClass: 'text',

  unhighlight: function(element) {
    $(element).closest(".form-group").removeClass("is-invalid");
    $(element).closest(".form-group").addClass("is-valid");
  },

  highlight: function(element) {
    $(element).closest(".form-group").addClass("is-invalid");
    $(element).closest(".form-group").removeClass("is-valid");
  },

  errorPlacement: function(error, element) {
    $('<div class="feedback"></div>').appendTo(element.closest(".input-group"));
    error.appendTo(element.closest(".input").next());
  },

  submitHandler: function(form) {
    var form_data = new FormData(form);
    $.ajax({
      url: 'php/enviar.php',
      type: 'POST',
      data: form_data,
      cache: false,
      contentType: false,
      processData: false,
      beforeSend: function() {
        $(form).find('.retorno_email').html('<div class="email-resposta email-aguarde">Enviando seus dados...<img src="https://webmachado.com.br/ajax-loader.gif" alt=""/></div>').fadeIn(3000);
        $('html, body').animate({
          scrollTop: $(".retorno_email").offset().top - $('.retorno_email').outerHeight(true) - 200
        }, 400);
      },
      success: function(retorno) {
        $(form).find('.retorno_email').html(retorno).fadeIn(3000);
        if ($(retorno).hasClass('email-enviado')) {
          $(form).each(function() {
            this.reset();
          });
        }
      }
    });
    return false;
  }
});

.form-group {
  margin-bottom: 10px;
}

.formulario .campo {
  padding: 5px 10px;
  border: solid 1px #ccc;
  font-size: 16px;
  color: #000000;
  margin-bottom: 5px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.form-group.is-invalid .campo {
  border: solid 2px red;
}

.form-group.is-valid .campo {
  border: solid 2px #28a745;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_pt_BR.js"></script>

<form class="formulario">
  <div class="form-group is-icom">
    <div class="input-group">
      <div class="input">
        <input class="campo" type="text" name="nome" placeholder="Nome" />
      </div>
    </div>
  </div>

  <div class="form-group is-icom">
    <div class="input-group">
      <div class="input">
        <input class="campo" type="email" name="email" placeholder="E-Mail" />
      </div>
    </div>
  </div>
  <div class="form-group is-icom">
    <div class="input-group">
      <div class="input">
        <input class="campo" id="senha" type="password" name="senha" placeholder="Senha" />
      </div>
    </div>
  </div>
  <div class="form-group is-icom">
    <div class="input-group">
      <div class="input">
        <input class="campo" type="password" name="confirmar_senha" placeholder="Confirmar senha" />
      </div>
    </div>
  </div>
  <div class="retorno_email"></div>
  <input type="submit" class="enviar" value="Enviar" />
</form>

Answer 1

You don’t have to traverse. jQuery already applies to all selector elements at once.

Remove all classes .is-valid of the form where the class is .form-group and .is-valid at the same time:

$(".formulario .form-group.is-valid").removeClass("is-valid");

You must place within the function of :success:

success: function(retorno) {
   $(".formulario .form-group.is-valid").removeClass("is-valid");
   $(form).find('.retorno_email').html(retorno).fadeIn(3000);
   if ($(retorno).hasClass('email-enviado')) {
      $(form).each(function() {
         this.reset();
      });
   }
}