не работает валидация js

Question

Изучаю js. Решил написать тестовую валидацию формы. В последней валидации validPasswords проверяется едентичность паролей. Но даже если значения в полях разные, форма почему то проходить и ошибка не отображается. Не знаю как решить. Снизу html со скриптом js. Неработающая валидация в самом конце скрипта, вызывается, если самая первая валидна, по коду видно. Поля паролей внизу html кода.

<style>
  .error {
    color: #D8000C;
  }
</style>



</div>
<form onsubmit="return valid_name()" name="register_form" action="{% url 'register' %}" method="POST">
  {% csrf_token %}

  <input style="left: 39%; position: relative;" id="input_form" type="text" name="first_name" class="form-input" required id="id_first_name" placeholder="Введите имя">
  <br><br>

  <input style="left: 39%; position: relative;" id="input_form" type="text" name="last_name" class="form-input" required id="id_last_name" placeholder="Введите фамилию"><br><br>

  <input pattern="[\+]\d+" style="left: 39%; position: relative;" id="input_form" type="text" name="number" class="form-input" required id="id_number" placeholder="Введите номер телефона" oninvalid="validNumber()"> <br><br>


  </td>
  </tr>

  <input pattern="\w+[\@]\w+[\.]\w+" style="left: 39%; position: relative;" type="email" placeholder="Введите ваш email" oninvalid="validEmail()" name="email" id="input_form" class="form-input" required id="id_email"><br><br>


  </td>
  </tr>

  <input minlength="8" style="left: 39%; position: relative;" type="password" placeholder="Придумайте пароль" name="password1" id="input_form" class="form-input" required id="id_password1" oninvalid="validPassword()"><br><br>


  <input style="left: 39%; position: relative;" placeholder="Подтверждения пароля" type="password" name="password2" id="input_form" class="form-input" required id="id_password2"><br><br><br>


  </td>
  </tr>

  <input style="left: 39%; position: relative;" id="button_accept" type="submit" value="Зарегистрироваться" />
</form>
</li>
</ul>

<center><span class="error" id="validate"> </span><br><br></center>

<script>
  function valid_name() {
    var name = document.forms["register_form"]["first_name"]
    if (name.value === "a") {
      document.getElementById("validate").innerHTML = "Имя не может быть пустым";
      name.focus();
      return false;
    } else {
      document.getElementById("validate").innerHTML = "";
      validPasswords()
    }
  }

  function validNumber() {
    document.getElementById("validate").innerHTML = "Неверный номер телефона";
  }

  function validPassword() {
    document.getElementById("validate").innerHTML = "Пароль должен быть не менее 8 символов";
  }

  function validEmail() {
    document.getElementById("validate").innerHTML = "Неверно введен адрес электронной почты!";
  }

  function validPasswords() {
    var password1 = documet.forms['register_form']['password1']
    var password2 = documet.forms['register_form']['password2']

    if (password1.value !== password2.value) {
      document.getElementById("validate").innerHTML = "Введеные пароли не совпадают";
      password2.focus();
      return false;
    }
  }
</script>

{% end

БЛОГ НА HUSL

не работает валидация js

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