Javascript 在表单上显示表单验证
我正在尝试实现一个简单的时事通讯注册表单，用户在其中输入他的电子邮件，然后按“提交”。电子邮件存储在MySQL数据库中，我想向订户发送一封确认电子邮件 我是从上面的代码开始的。 出于某些原因，在提交时，验证结果将显示在一个新的空html页面上，而我希望在初始页面上显示确认/验证（在表单上，如演示中所示： 这是我的HTML代码：Javascript 在表单上显示表单验证,javascript,php,mysql,validation,Javascript,Php,Mysql,Validation,我正在尝试实现一个简单的时事通讯注册表单，用户在其中输入他的电子邮件，然后按“提交”。电子邮件存储在MySQL数据库中，我想向订户发送一封确认电子邮件 我是从上面的代码开始的。 出于某些原因，在提交时，验证结果将显示在一个新的空html页面上，而我希望在初始页面上显示确认/验证（在表单上，如演示中所示： 这是我的HTML代码： <div id="newsletterform"> <div class="wrap">
<div id="newsletterform">
<div class="wrap">
<h3>Get Email Update</h3>
<p>Lorem ipsum dolor sit amet..</p>
<form action="php/send.php" method="post" id="newsletter" name="newsletter">
<input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
<input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<span class="arrow"></span>
</form>
<div id="response"></div>
</div>
</div>
获取电子邮件更新
Lorem ipsum dolor sit amet
<!DOCTYPE HTML>
<html>
<head>
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/touch/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/touch/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/touch/apple-touch-icon-144x144.png">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lib.js"></script>
</head>
<?php
require 'Database.class.php';
require 'Newsletter.class.php';
if (!empty($_POST)) {
$email = $_POST['signup-email'];
Newsletter::register($email);
}
首先确保您已将Jquery导入脚本，并且在提交事件中，您必须防止表单的默认行为，即提交并刷新页面，您可以使用以下方法执行此操作：
$('#newsletter').submit(function (event) {
event.preventDefault();
//the rest of your code goes here.
抱歉，我的英语不好，我希望这能帮助你。你需要在lib.js
eg
Hi Steve之前加入jquery。我尝试了这个方法，但没有改变行为。：：欢迎使用StackOverflow。请阅读并遵循帮助文档中的发布指南。适用于此处。将发布的示例减至最低重新创建问题所需的大小对您来说是一个很好的调试练习，并吸引更多的人来尝试您的问题。他的意思是，您的代码太多了。请尝试找到仍然会产生错误的最小代码段，然后将其发布，而不是在此处转储代码。Stack Overflow的社区非常欣赏它恩，他们可以告诉你付出了努力。嗨，jarguez01。我想我必须用你的代码替换lib.js的第二行。而且这似乎不起作用。我仍然在一个新页面上着陆，上面显示了验证结果…：/@user3981693你能显示你的html文件的头吗？还有，你在哪里包括jsquery库？我在我的原始帖子中复制/粘贴了我的html文件…：-）Hi@user3981693您在浏览器的开发者工具控制台上遇到了什么错误。？Hi。我在控制台中没有看到任何错误。我只是在浏览器中看到我收到的消息（{“status”：“error”，“message”：“email address字段不能为空”}），在Sources中，我看到Send.php。。。
<?php
class Newsletter
{
private static $email;
private static $datetime = null;
private static $valid = true;
public function __construct() {
die('Init function is not allowed');
}
public static function register($email) {
if (!empty($_POST)) {
self::$email = $_POST['signup-email'];
self::$datetime = date('Y-m-d H:i:s');
if (empty(self::$email)) {
$status = "error";
$message = "The email address field must not be blank";
self::$valid = false;
} else if (!filter_var(self::$email, FILTER_VALIDATE_EMAIL)) {
$status = "error";
$message = "You must fill the field with a valid email address";
self::$valid = false;
}
if (self::$valid) {
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$existingSignup = $pdo->prepare("SELECT COUNT(*) FROM signups WHERE signup_email_address='$email'");
$existingSignup->execute();
$data_exists = ($existingSignup->fetchColumn() > 0) ? true : false;
if (!$data_exists) {
$sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
$q = $pdo->prepare($sql);
$q->execute(
array(':email' => self::$email, ':datetime' => self::$datetime));
if ($q) {
$status = "success";
$message = "You have been successfully subscribed";
} else {
$status = "error";
$message = "An error occurred, please try again";
}
} else {
$status = "error";
$message = "This email is already subscribed";
}
}
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
Database::disconnect();
}
}
}
$(document).ready(function () {
$('#newsletter').submit(function () {
var $this = $(this),
$response = $('#response'),
$mail = $('#signup-email'),
testmail = /^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/,
hasError = false;
$response.find('p').remove();
if (!testmail.test($mail.val())) {
$response.html('<p class="error">Please enter a valid email</p>');
hasError = true;
}
if (hasError === false) {
$response.find('p').remove();
$response.addClass('loading');
$.ajax({
type: "POST",
dataType: 'json',
cache: false,
url: $this.attr('action'),
data: $this.serialize()
}).done(function (data) {
$response.removeClass('loading');
$response.html('<p>'+data.message+'</p>');
}).fail(function() {
$response.removeClass('loading');
$response.html('<p>An error occurred, please try again</p>');
})
}
return false;
});
});
$('#newsletter').submit(function (event) {
event.preventDefault();
//the rest of your code goes here.