Javascript 使用jQuery成功进行客户端验证后，如何提交html表单进行服务器端验证？
我目前正在从事一个web应用程序项目。 我已经完成了注册页面的设计。 我已经使用jQuery进行输入验证，到目前为止，一切都按预期进行。 但是，当我单击Register（submit）按钮时，表单没有提交。 我正在使用php、MySQL、JavaScript、CSS和Bootstrap来完成这项任务。 下面是我在register.php文件中的代码：Javascript 使用jQuery成功进行客户端验证后，如何提交html表单进行服务器端验证？,javascript,php,html,jquery,css,Javascript,Php,Html,Jquery,Css,我目前正在从事一个web应用程序项目。 我已经完成了注册页面的设计。 我已经使用jQuery进行输入验证，到目前为止，一切都按预期进行。 但是，当我单击Register（submit）按钮时，表单没有提交。 我正在使用php、MySQL、JavaScript、CSS和Bootstrap来完成这项任务。 下面是我在register.php文件中的代码： **<?php // Include config file require_once "./config/connection.
**<?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>**
我怀疑我的jQuery代码是罪魁祸首，但似乎不知道如何在输入验证成功后允许提交。请帮忙。这是很多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>
提交
函数验证（事件）{
var formIsValid=真；
if（formIsValid）{
//让浏览器提交表单。
}否则{
//防止表单提交。
event.preventDefault（）；
}
}
在您的示例中，您可以更改
$（'#btnregister'）。单击函数到$（'form'）。提交（函数（事件）{event.preventDefault（）；}）
如果验证正常，请尝试使用jQuery方法提交表单
if ((usernameerror == true) &&
(passworderror == true) &&
(confirmpassworderror == true) &&
(emailerror == true)) {
$('#registrationform').submit();
} else {
return false;
}
控制台中有JavaScript错误吗？（注意，您的html可能与此相关。CSS和PHP几乎肯定不相关。）我在控制台中没有任何错误。事实上，问题是，当我在输入验证通过后点击提交按钮时，浏览器不会重定向，输入也不会被清除。当我点击注册按钮时，什么也不会发生。表单操作下的脚本文件没有加载。好吧，因为有很多代码，我们很难确定代码不起作用的原因。这就是为什么我建议首先验证基础：1。暂时从btnregister中删除验证代码单击并断言表单已发布。然后重新添加验证并研究验证规则，在这里或那里添加一些警报，查看这些行是否执行，等等……您的代码非常完美。但是，我在jQuery代码中发现了一些逻辑错误，因此在成功验证后，控制流被传输到上述代码段中的else块。为了解决这个问题，我需要在所有验证函数中验证成功的代码块中将错误标志设置为true。例如，在validateUsername（）函数中，我需要在else块中设置usernamererror=true。在所有其他验证功能中重复相同的操作。
<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>
if ((usernameerror == true) &&
(passworderror == true) &&
(confirmpassworderror == true) &&
(emailerror == true)) {
$('#registrationform').submit();
} else {
return false;
}