0

Estou criando um formulário com validação usando o plugin jQuery Validation, o formulário já tem um estrutura pronta, e por isso precisei, fazer com que as classes de erro de sucesso foram adicionadas juntos a classe .form-group.

Quando o campo é validado com sucesso adiciona a classe .is-valid, no entanto estou com dificuldades de fazer com que essa classe seja removida quando o formulário for submetido, da forma que está, o usuário envia, os campos são limpos, mas a borda verde ainda continua.

Lembrando que as classes .is-valid serão removidas somente dentro do formulário, evitando de remover em algum outro luga do site, caso exista.

$(".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>

1 Resposta 1

1

Não precisa percorrer. O jQuery já aplica em todos os elementos do seletor de uma só vez.

Remover todas as classes .is-valid do formulário onde tem a classe .form-group e .is-valid ao mesmo tempo:

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

Você deve colocar dentro da função do :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();
      });
   }
}
4
  • 2019 cheio de sucessos ai pra vc tio
    – user60252
    31/12/2018 às 18:40
  • @LeoCaracciolo Valeu vovô! Sucessos pra ti tb! 👍
    – Sam
    31/12/2018 às 18:43
  • Coisa tão simples, não sei que danado que estava fazendo kkkk Só fiz uma modificação para não precisar ficar repetindo a class do formulário $(form).find(".is-valid").removeClass("is-valid"); 31/12/2018 às 19:18
  • Pode ser assim tb, eu usei $(".formulario .form-group.is-valid").removeClass("is-valid"); para ficar mais específico o seletor. Mas do seu jeito tb funciona.
    – Sam
    31/12/2018 às 19:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .