Go through existing classes in a form and remove

Question

Go through existing classes in a form and remove

Navigation

#1 by (2 votes)

0

I'm creating a form with validation using the jQuery Validation plugin, the form already has a ready structure, so I had to, the successful error classes were added together with the .form-group class.

When the field is successfully validated it adds the .is-valid class, however I am having difficulty getting this class removed when the form is submitted, as it is, the user sends, the fields are clean, but the green border still continues.

Remembering that .is-valid classes will be removed only within the form, avoiding to remove elsewhere in the site, if it exists.

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

javascript jquery jquery-validate

asked by anonymous 31.12.2018 / 19:00

1 answer

Problem Query Beego SQL SCRIPT WITH ERROR

score 2 · Accepted Answer

No need to go . JQuery already applies to all selector elements at once.

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

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

You should put within the :success function:

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();
      });
   }
}