Почему эта форма и эта проверка не работают

Question

Я занимаюсь базовым программированием с Bootstrap, HTML, CSS и JavaScript, и на данный момент я делаю веб-сайт, который начинается с целевой страницы, запрашивает пароль, а затем отправляет Вы на другую страницу.

Дело в том, что форма и проверка JavaScript не работают вместе, и я не знаю, почему и что я делаю неправильно, поэтому, если кто-то может мне помочь, это было бы здорово! Спасибо!

<div class="jumbotron">
  <form name="PasswordField" action="">
    <div class="form-group">
      <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
  </form>
</div>

<script type="text/javascript">
  function isValid(password)
  {
    var pass ="seahorse";
    var password = document.getElementById("password");

    if (password.value.toUpperCAse().match(pass))
    {
      window.location.href = "HappyChristmas.html";

      return true;
    }
    else
    {
      alert('Nope, try again');

      return false;
    }
  }
</script>

Answer 1

Две причины: 1. Вы не вызываете функцию isValid из любого места и 2. У вас нет аргумента password для добавления в функцию. Попробуйте это:

<div class="jumbotron">
        <form name="PasswordField" action="">
          <div class="form-group">
            <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <-- Add an ID to the button -->
          <button type="submit" id="submitBtn" class="btn btn-default">Submit</button>
        </form>

<script type="text/javascript"
            const pass ="seahorse"
            const password = document.getElementById("password");

            const submitBtn = document.getElementById("submitBtn");
            submitBtn.addEventListener("click", e=>{
              e.preventDefault();
              isValid();
            })

            function isValid() {
                if (password.value.toLowercase().match(pass)){
                    window.location.href = "HappyChristmas.html";
                    return true;
                    }
                else{
                    alert('Nope, try again')
                    return false;
                    }
            }
</script>

Answer 2

1. Вы не звоните isValid() при отправке формы.
2. Вы преобразовываете свое входное значение toUpperCase() и проверяете, соответствует ли оно lowercase паролю "seahorse".

Проверьте фрагмент кода, который я сделал в соответствии с вашим кодом, и он работает нормально.

Я добавил onclick вызов вашей кнопки submit, чтобы она вызывала вашу функцию isValid().

Также стоит упомянуть, что вы передаете parameter своей функции isValid(), но вам это не нужно, потому что вы получаете пароль element и его value непосредственно внутри функции.

Еще одна вещь, о которой стоит упомянуть, это то, что вы returning a boolean для функции, но вам это не нужно, потому что вы не выполняете условия в своем скрипте и при изменении местоположения на window.location или alert() код будет остановлен.

function isValid()
{
    var pass = "seahorse";
    var password = document.getElementById("password");

    if (password.value.match(pass))
    {
        window.location.href = "HappyChristmas.html";
    }
    else
    {
        alert('Nope, try again');
    }
}

<div class="jumbotron">
  <form name="PasswordField" action="">
    <div class="form-group">
      <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
  </form>
</div>

Answer 3

Сначала добавьте событие в форму для вызова вашей функции JavaScript

<form name="PasswordField" action="/where/to/go" onsubmit="return isValid()">

Затем удалите аргумент из определения функции function isValid(password){ ... }, поскольку вы перезаписываете его с помощью узла dom (var password = document.getElementById("password");)

В-третьих, это можно изменить

if (password.value.toUpperCAse().match(pass)){

к этому

if (password.value.toUpperCase() == pass.toUpperCase()){