如何将用户直接定向到表单 [英] How to direct a user directly to a form

问题描述

我现在设置的是一个登录表单和一个设置为一页的注册表单，但是它使用一些Jquery在表单之间来回切换.显示登录表单后，注册表单将被隐藏，反之亦然.页面加载后，将显示登录表单，并且隐藏了注册表单，并带有通过按钮在两者之间切换的选项.这是我遇到的问题.我已经使用一些PHP在注册表单(页面首次加载时仅显示登录表单)上创建了一些错误处理程序，所以说，当用户输入无效的用户名时，我想将他们正确输入的字段返回给通过网址填写表格.问题在于，当我回到URL时会显示登录表单，而不是需要从URL输入数据的注册表单.我正在寻找一种在页面加载时直接访问注册表单的方法，也许有一种将链接直接附加到注册表单本身的方法?我希望我能清楚地描述我的问题.感谢您的帮助.

What I have set up right now is a login form and a signup form that is set into one page, but it toggles back and forth between the forms with some Jquery. When the login form is shown, the signup form is hidden and vice versa. When the page loads, the login form is shown, and the signup form is hidden with the option to toggle between the two with a button. Here's the issue I am running into. I have created some error handlers on the signup form (only the login form is shown when the page initially loads) with some PHP, so say when the user puts in an invalid username, I want to return the fields they entered correctly back to the form via the URL. The issue is that the login form is shown when I am taken back to the URL, not the signup form where I need to input data from the URL. I am looking for a way to access the signup form directly on page load, maybe there's a way to attach a link directly to the signup form itself? I hope I am being clear on describing my issue. Any help is appreciated.

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

推荐答案

解决此问题的常用方法是在提交表单之前通过JavaScript 验证注册字段.

A common method to solve this problem is to validate the sign-up fields via javascript before the form is submitted.

您可以使用javascript/jQuery中断提交过程，检查每个字段的值，以及-如果一个或多个字段验证失败-return false将控制权还给用户以解决问题并尝试再次.

You can use javascript/jQuery to interrupt the submit process, check the value of each field, and - if one or more fields fails validation - return false to return control back to the user in order to fix the problems and try again.

以下是一些代码示例和演示:

Here are some code examples and demos:

要中断提交，只需使用:

To interrupt the submit, you just use:

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

这里是如何进行基本字段验证的示例.

Here is an example of how to do basic field validation.

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

这篇关于如何将用户直接定向到表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！