How to stop fomulário sending with Javascript?

Question

I have a form using the form.CheckValidity to check empty fields and not send them.

However precise also it compares and does not submit forms with different password fields.

I tried everything I knew and it’s not working. He checks, but sends the form.

My code:

(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>

The function works well while the fields are empty. But when, fills it sends even the passwords being different.

Answer 1

Try to trade:

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

For:

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

and adds the view function:

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

Forehead here

Answer 2

Adds return false; after that line event.stopPropagation();

Answer 3

After you click the button and the JS check the data, if by chance it is not within the expected of a false Return in the function

See this tutorial on page 211: https://www.caelum.com.br/download/caelum-html-css-javascript.pdf