0

Tenho um formulário usando o form.CheckValidity para verificar campos vazios e não envia-los.

No entanto preciso também que ele compare e não submeta formulários com campos de senhas diferentes.

Tentei de tudo que sabia e não está dando certo. Ele verifica, mas envia o formulário.

Meu código:

(function() { 'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validationss');
  var senha1 = document.getElementById("senha1").value;
  var senha2 = document.getElementById("senha").value;
  console.log(senha1);
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false || senha1 != senha2) {
          event.preventDefault();
          event.stopPropagation();
    }
    form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">`<form class="needs-validationss" action="123.php" novalidate>
      <div class="modal-body">
        <div class="col">
          <label for="senha">Nova senha:</label>
          <input type="password" class="form-control" name="senha" id="senha" required size="15" maxlength="15" required>
          <div class="invalid-feedback" id="inseresenha">
            Por favor, insira sua nova senha.
          </div>
        </div>
        <div class="col mt-5">
          <label for="senha1">Repetir nova senha:</label>
          <input type="password" class="form-control" name="senha1" id="senha1" required size="15" maxlength="15" required>
          <div class="invalid-feedback" id="repetesenha">
            Por favor, repita sua nova senha.
          </div>
          <div class="invalid-feedback" id="senhasdiferentes">
            Por favor, insira duas senhas iguais.
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" id="btnVerify" class="btn btn-outline-dark">Trocar senha</button>
      </div>
    </form>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

A função funciona bem enquanto os campos estão vazios. Mas quando, preenche ele envia mesmo as senhas estando diferente.

4
  • 1
    tenta trocar o tipo do botão de "submit" para "button" e adiciona um evento de click "onclick" chamando uma função que verifique as senhas e de estiver ok, faz o submite: "document.getElementById("form1").submit();"
    – RDyego
    21/03/2019 às 11:24
  • Se eu trocar o botão, como eu chamo essa função maior?
    – Wan
    21/03/2019 às 16:12
  • coloquei uma resposta, testa lá.,
    – RDyego
    21/03/2019 às 16:32
  • Testei, JavaScript é algo muito chato kkk
    – Wan
    21/03/2019 às 20:48

3 Respostas 3

1

Tenta trocar:

<button type="submit" id="btnVerify" class="btn btn-outline-dark">Trocar senha</button>

Por:

<input type="button" value="Trocar senha" id="btnVerify" class="btn btn-outline-dark" onclick="verficaEenvia()">

e adiciona a função verficaEenvia:

    function verficaEenvia() {
        var forms = document.getElementsByClassName('needs-validationss');
        var senha1 = document.getElementById("senha1").value;
        var senha2 = document.getElementById("senha").value;
        // forms.checkValidity() === false ||
        if (senha1 != senha2) {
           alert("senha1 != senha2");
        } else {
           alert("senha1 == senha2  e submeteu");
           document.getElementById("form1").submit();
        }
    }

Testa aqui

3
  • Também não deu. Ele nem envia assim.
    – Wan
    21/03/2019 às 20:47
  • Testa de novo s2, coloquei um link para você testar.
    – RDyego
    21/03/2019 às 23:22
  • obrigado! Ajudou muito
    – Wan
    22/03/2019 às 17:04
0

Adiciona return false; depois dessa linha event.stopPropagation();

1
  • Coloquei o return false; e envia mesmo assim.
    – Wan
    21/03/2019 às 16:07
0

Depois que clicar no botão e o JS fazer a verificação dos dados, se por acaso não estiver dentro do esperado de um return false na função

Veja esse tutorial na página 211: https://www.caelum.com.br/download/caelum-html-css-javascript.pdf

1
  • Olho agora!!!! Valeu
    – Wan
    22/03/2019 às 17:05

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 .