在使用 jQuery 成功进行客户端验证后，如何提交用于服务器端验证的 html 表单？答案

【问题标题】：How can I submit a html form for server-side validation after successful client-side validation with jQuery?在使用 jQuery 成功进行客户端验证后，如何提交用于服务器端验证的 html 表单？
【发布时间】：2020-12-28 14:04:25
【问题描述】：

我目前正在开发一个 Web 应用程序项目。我已经完成了注册页面的设计。我使用 jQuery 进行输入验证，到目前为止一切都按预期工作。但是，当我单击注册（提交）按钮时，表单没有提交。我正在使用 php、MySQL、JavaScript、CSS 和 Bootstrap 来完成这项任务。以下是我在 register.php 文件中的代码：

**<?php
// Include config file
require_once "./config/connection.php";
// Define variables and initialize with empty values
$username = $password = $confirm_password = "";
$username_err = $password_err = $confirm_password_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
    // Validate username
    if(empty(trim($_POST["username"])))
    {
        $username_err = "Please enter your email";
    }
    else
    {
        // Prepare a select statement
        $sql = "SELECT email FROM users WHERE username = ?";
        if($stmt = mysqli_prepare($con, $sql))
        {
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "s", $param_username);
            // Set parameters
            $param_username = trim($_POST["username"]);
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt))
            {
                /* store result */
                mysqli_stmt_store_result($stmt);
                if(mysqli_stmt_num_rows($stmt) == 1)
                {
                    $username = trim($_POST["username"]);
                }
                else
                {
                    $username_err = "The email provided does not belong to your organization";
                }
            }
            else
            {
                echo "Oops! Something went wrong. Please try again later.";
            }
            // Close statement
            mysqli_stmt_close($stmt);
        }
    }
    // Close connection
    mysqli_close($con);
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>DEMO TELEPHONE DIRECTORY</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bootsstrap/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <!-- <script src="/"jquery-ui-1.11.4/jquery-ui.min.js"  ></script> -->
    <link rel="stylesheet" href="./css/index.css" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="./bootsstrap/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="./js/register.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div id="loginpanel">
        <form name="loginform" id="registrationform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
          <h1>Register</h1>
          <div class="form-group">
              <label for="usernameregistration">Email</label>
              <input class="form-control" id="usernameregistration" type="text" placeholder="Email" name="username" required autofocus/>
              <p id="usernameerror" class="alert-error  <?php echo (empty($username_err)) ? 'hideerror' : '';?>" role="alert"><?php echo $username_err; ?></p>
          </div>
          <div class="form-group">
              <label for="passwordregistration">Password</label>
              <input class="form-control" id="passwordregistration" type="password" placeholder="Password" name="password" required/>
              <p id="registrationpassworderror" class="alert-error hideerror" role="alert" ></p>
          </div>
          <div class="form-group">
            <div class="form-group">
                <label for="confirmpasswordregistration">Confirm Password</label>
                <input class="form-control" id="confirmpasswordregistration" type="password" placeholder="Confirm Password" name="confirmpassword" required/>
                <p id="confirmregistrationpassworderror" class="alert-error hideerror" role="alert"></p>
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-md btn-block" name="btnregister" id="btnregister" type="submit">Register</button>
          </div>
          <div class="form-group">
              <span>Already registered? </span><span><a href="./">Click here to login</a></span>
          </div>
        </form>
      </div>
    </div>
    <div class="clearfix"></div>
  </body>
</html>**

下面是我在 register.js 文件中的 JavaScript 代码：

**$(document).ready(function(){
  // Validate Username
  $('#usernameerror').html('').addClass('hideerror');
  let usernameerror = true;
  $('#usernameregistration').keyup(function () {
      validateUsername();
  });
  function validateUsername() {
    let username = $('#usernameregistration').val();
    if (username.length == '') {
        $('#usernameerror').html('Please enter your email').removeClass('hideerror');
        usernameerror = false;
        return false;
    }
    else {
        $('#usernameerror').html('').addClass('hideerror');
    }
  }
  // Validate Email
  $('#usernameerror').html('').addClass('hideerror');
  let emailerror = true;
  $('#usernameregistration').keyup(function () {
      validateEmail();
  });
  function validateEmail() {
    let email = $('#usernameregistration').val();
    if (email.length != '')
    {
      if (isEmail(email))
      {
        $('#usernameerror').html('').addClass('hideerror');
      }
      else
      {
        $('#usernameerror').html('The email is invalid').removeClass('hideerror');
        emailerror = false;
        return false;
      }
    }
  }
  function isEmail(email) {
    let regexEmail = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
    return regexEmail.test(email);
  }
  // Validate Password
  $('#registrationpassworderror').html('').addClass('hideerror');
  let passworderror = true;
  $('#passwordregistration').keyup(function () {
      validatePassword();
  });
  function validatePassword() {
    let password = $('#passwordregistration').val();
    if (password.length == '') {
        $('#registrationpassworderror').html('Please enter your password').removeClass('hideerror');
        passworderror = false;
        return false;
    }
    else if (password.length < 6) {
        $('#registrationpassworderror').html('Password length should be at least 6 characters').removeClass('hideerror');
        passworderror = false;
        return false;
    }
    else {
        $('#registrationpassworderror').html('').addClass('hideerror');
    }
  }
  // Validate Confirm Password
  $('#confirmregistrationpassworderror').html('').addClass('hideerror');
  let confirmpassworderror = true;
  $('#confirmpasswordregistration').keyup(function () {
      validateConfirmPassword();
  });
  function validateConfirmPassword() {
    let password = $('#passwordregistration').val();
    let confirmpassword = $('#confirmpasswordregistration').val();
    if (confirmpassword.length == '') {
        $('#confirmregistrationpassworderror').html('Please confirm your password').removeClass('hideerror');
        confirmpassworderror = false;
        return false;
    }
    else if (confirmpassword != password) {
        $('#confirmregistrationpassworderror').html('Password and Confirm Password do not match').removeClass('hideerror');
        confirmpassworderror = false;
        return false;
    }
    else {
        $('#confirmregistrationpassworderror').html('').addClass('hideerror');
    }
  }
  // Submit button
  $('#btnregister').click(function () {
      validateUsername();
      validatePassword();
      validateConfirmPassword();
      validateEmail();
      if ((usernameerror == true) &&
          (passworderror == true) &&
          (confirmpassworderror == true) &&
          (emailerror == true)) {
          return true;
      } else {
          return false;
      }
  });
});**

最后，下面是我在 index.css 文件中的 css 代码：

**#loginpanel
{
    margin:0 auto;
    width: 300px;
    position: relative;
    top:150px;
    background-color: beige;
    padding:20px;
    border-radius: 0px;
}
#errormsg
{
    clear:both;
    position: relative;
    top:250px;
}
.hideerror
{
   display: none;
}
.alert-error
{
  color: red;
  margin-bottom: -15px;
}**

我怀疑我的 jQuery 代码是罪魁祸首，但似乎无法弄清楚如何在输入验证成功后允许提交。请帮忙。

【问题讨论】：

控制台中是否有任何 JavaScript 错误？（注意，您的 html 可能与此处相关。CSS 和 PHP 几乎可以肯定不相关。）

标签： javascript php html jquery css

【解决方案1】：

上面有很多 jquery 代码。我建议从基础开始，当用户单击按钮时，我们如何防止表单提交：

<form onsubmit="validate(event)">
    <input name="var1" value="xxx">
    <button>Submit</button>
</form>

<script>
    function validate(event) {
        var formIsValid = true;
        
        if (formIsValid) {
            // let the browser submit the form.
        } else {
            // prevent the form submitting.
            event.preventDefault();
        }
    }
</script>

每当单击提交按钮/用户尝试提交表单时，我们都可以监听“提交”事件。

如果我们在提交事件上调用 preventDefault，我们可以阻止用户提交无效的表单。

在您的示例中，您可以将 $('#btnregister').click 函数更改为 $('form').submit(function(event) { event.preventDefault(); })

【讨论】：

我在控制台中没有任何错误。实际上，问题是，当我在输入验证通过后点击提交按钮时，浏览器没有重定向，输入也没有被清除。
当我点击注册按钮时没有任何反应。表单动作下的脚本文件未加载。
好的，因为代码很多，我们很难找出你的代码不起作用的原因。这就是为什么我建议首先验证基础知识的原因： 1. 暂时从 btnregister-click 中删除验证代码并断言表单已发布。然后重新添加验证并研究验证规则，在此处添加一些警报，以查看这些行是否已执行，等等...

【解决方案2】：

如果验证成功，尝试发送表单使用 jQuery 方法提交

if ((usernameerror == true) &&
      (passworderror == true) &&
      (confirmpassworderror == true) &&
      (emailerror == true)) {
         $('#registrationform').submit();
  } else {
      return false;
  }

【讨论】：

你的代码很完美。但是，我在我的 jQuery 代码中发现了一些逻辑错误，因此在成功验证后，控制流被转移到上述代码 sn-p 中的 else 块。为了解决这个问题，我需要在所有验证函数中验证成功的代码块中将错误标志设置为 true。例如，在函数 validateUsername() 中，我需要在 else 块中设置 usernameerror = true。将在所有其他验证功能中重复相同的操作。