PHP验证失败后跳转到特定的id
jump to specific id after php validation fails
谁能告诉我如何让页面跳转(或滚动)到特定的id,在php验证失败后出现错误消息?
我有一个php页面很长,用户必须滚动到底部。在页面中间,有一个联系表单,用户可以输入电子邮件地址和评论。用户按下"发送"按钮后,php验证工作。但是,在按下"发送"按钮后,它会跳到页面的最顶部。之后,我可以看到错误信息显示在联系人表单下方,我自己向下滚动。但是,这不应该是你们都同意的方式……
然后,我尝试使用javascript scrollTop,如下所示。ScrollTop工作,尽管没有出现错误消息....
我知道我错过了一些东西,但我不知道我错过了什么....
你能帮我一下吗?
index.php和top.js如下所示;
index . php
<?php
session_start();
if(isset($_POST['sendemail'])){
$_SESSION['email'] = $_POST['email'];
$_SESSION['message'] = $_POST['message'];
if (!$_SESSION['email'] || !filter_var($_SESSION['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'please type correct email address';
}
if (!$_SESSION['message']) {
$errMessage = 'please type message';
}
if (!$errEmail && !$errMessage) {
header('Location: messagesent.php');
exit;
}
}
?>
<html>
<head>..</head>
<body>
...
<section id="contact">
...
<div>
<input name="email" type="text">
<label>Email</label>
<?php echo "<p style='color:red;'>$errEmail</p>";?>
</div>
<div>
<textarea name="message"></textarea>
<label>Message</label>
<?php echo "<p style='color:red;'>$errMessage</p>";?>
</div>
<div class="right-align">
<button id="contactbutton" type="submit" name="sendemail">Send</button>
</div>
...
</section>
...
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>
</body>
</html>
top.js
$(function(){
$('#contactbutton').click(function(){
$('html,body').animate({
scrollTop: $('#contact').offset().top
}, 1000);
return false;
});
});
假设您有一个包含输入的表单元素,您可以使用片段标识符将表单操作设置为当前页面:
<form action="#errors"> ... </form>
你可以给错误容器指定一个id:
<div id="errors">Error list</div>
或者在错误容器前放置一个空锚:
<a name="errors"></a>
<div>Error list</div>
name和id值在文档中必须是唯一的。不需要显式重定向
也许你可以为你的消息框创建一个id:
<?php echo "<p id='"errMessage'" style='color:red;'>$errMessage</p>";?>
那么在验证中你可以这样做:
if (isset($errMessage) && !empty($errMessage)) {
header("Location: index.php#errMessage");
}
这将使光标集中在错误消息上。您还可以使用相同的技术来更改文本区域和其他所需字段的焦点。
相关文章:
- 如何编写用于id验证的正则表达式(JavaScript)
- Form获胜'没有ID主联系表格无法验证
- Php,Javascript-动态表单id's和动态验证
- Javascript:表单验证getElementById仅返回第一个id元素
- 对具有相同 id 的多个元素进行文本验证
- 如何使用 JavaScript 验证 youtube 视频 ID
- 使用Regex验证电子邮件id长度
- 如何使用JavaScript函数验证Google Analytics跟踪id
- 正在尝试验证用户ID
- 验证表单按id输入val
- 我是否必须在每个请求上验证谷歌令牌ID
- 按 ID 验证 JavaScript 中的列表框和单选按钮
- Gmail 电子邮件 ID 验证
- Javascript/jQuery ID 检查以通过验证驱动编号功能
- 使用 jquery 验证电子邮件 ID
- 在 id javascript 上验证 submitHandler
- 验证具有相同 ID 的多个输入
- 从经过身份验证的用户获取打开图形操作 ID
- jQuery 拖放,验证可拖动 ID
- 如何使用动态id验证html元素