Как направить пользователя прямо в форму

Question

То, что я сейчас настроил, - это форма входа в систему и форма регистрации, которая устанавливается на одной странице, но переключается между формами с помощью некоторого Jquery. Когда отображается форма входа в систему, форма регистрации скрыта, и наоборот. Когда страница загружается, отображается форма входа в систему, а форма регистрации скрыта с возможностью переключения между ними с помощью кнопки. Вот проблема, с которой я сталкиваюсь. Я создал несколько обработчиков ошибок в форме регистрации (при начальной загрузке страницы отображается только форма входа в систему) с помощью некоторого PHP, поэтому, например, когда пользователь вводит неверное имя пользователя, я хочу вернуть поля, которые он правильно ввел, обратно в Форма через URL. Проблема в том, что форма входа отображается, когда я возвращаюсь к URL, а не в форму регистрации, где мне нужно вводить данные из URL. Я ищу способ доступа к форме регистрации непосредственно при загрузке страницы, может быть, есть способ прикрепить ссылку непосредственно к самой форме регистрации? Я надеюсь, что я ясно изложил свою проблему. Любая помощь приветствуется.

<?php
    require 'header.php';
  ?>

<div class="form-data text-center">
  <h1 class="form-header">Header</h1>
    <div id="login" class="main-login">
        <form class="login-form" action="includes/login.inc.php" method="post">
          <input name="mailuid" type="text" placeholder="Page Name"></input>
          <br>
          <input name="pwd" type="password" placeholder="Password"></input>
          <br>
          <button name="login-submit" type="submit">Login</button>
        </form>
        <p>Need to create a page?</p>
        <a class="btn btn-default" href="#" id="toggle-signup">Sign up</a>
    </div>

    <div id="signup" class="text-center">
        <form href="login_signup/signup" class="signup-form" action="includes/signup.inc.php" method="post">
          <input name="pagename" type="text" placeholder="Page Name"></input>
          <br>
          <input name="email" type="text" placeholder="Email"></input>
          <br>
          <input name="pwd" type="password" placeholder="Password"></input>
          <br>
          <input name="pwd-repeat" type="password" placeholder="Repeat Password"></input>
          <br>
          <button name="signup-submit" type="submit">Login</button>
        </form>
        <p>Already have an account?</p>
        <a class="btn btn-default" href="#" id="toggle-login">Log In</a>
    </div>
</div>

<script>
  $("#toggle-login").click(function(){
      $("#signup").hide().attr("formnovalidate");
      $("#login").show();
  });

  $("#toggle-signup").click(function(){
      $("#login").hide().attr("formnovalidate");
      $("#signup").show();
  });

  $("document").ready(function(){
      $("#signup").hide();
  });
</script>

Answer 1

Распространенным методом решения этой проблемы является проверка полей регистрации с помощью javascript перед отправкой формы.

Вы можете использовать javascript / jQuery для прерывания процесса отправки,проверьте значение каждого поля и - если одно или несколько полей не пройдут валидацию - return false для возврата управления пользователю, чтобы исправить проблемы и повторить попытку.

Вот несколько примеров кода и демонстрационные примеры:

Чтобы прервать отправку, вы просто используете:

$('#id_of_your_form').submit(function(){
    let var_valid = true; //any variable name will do...
    //
    //validation code goes here - see next demo below
    //
    if (!var_valid) return false;
    //if the code gets here, it will continue submitting
});

Вот пример того, как выполнить базовую проверку поля.

http://jsfiddle.net/W4g4e/7/