表單驗證失敗后向下滾動到表單
[英]Scroll down to form after form validation failure
問題描述
我有一個 php 聯系表單，提交時會驗證字段，但此過程會重新加載頁面並且表單不在頁面頂部，所以我希望它自動滾動到驗證失敗時表單所在的頁面底部所以用戶可以看到錯誤。 似乎 javascript 是執行此操作的唯一方法，因此我嘗試回顯腳本以及錯誤消息，但它不起作用。 瀏覽器控制台中沒有錯誤，只是不滾動。
我在新頁面加載后從 View Source 中取出解析后的 HTML 並將其放入jsFiddle here 。 您可以看到它在小提琴中正確滾動，但真實站點沒有。
編輯：
我還嘗試將 jquery 庫的加載添加到滾動腳本之前，即使我確認庫首先加載它仍然沒有滾動。 我不知所措。
這是 php 的片段：
<?php
// define variables and set to empty values
$nameErr = $fromErr = $phoneErr = $verif_boxErr = $recaptchaErr = "";
$name = $from = $phone = $message = $verif_box = "";
$recaptcha = NULL;
$errors = 0;
if ($_SERVER["REQUEST_METHOD"] == "POST") { //check if form has been submitted
if (empty($_POST["name"])) {
$nameErr = " * Name is missing";
$errors = 1;
echo '<style type="text/css"> input#name {border: 1px solid #F00;
box-shadow: 0px 0px 5pt .1pt #F00 inset;}</style>
<script type="text/javascript">
function scrollSmoothToBottom(){
$(scrollingElement).animate({scrollTop:document.body.scrollHeight},500)
}scrollingElement=document.scrollingElement||document.body,
window.onload=scrollSmoothToBottom;</script>';
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/", $name)) {
$nameErr = "Only letters and white space allowed";
$errors = 1;
echo '<style type="text/css"> input#name {border: 1px solid #F00; box-shadow: 0px 0px 5pt .1pt #F00 inset;}</style>';
}
}
if ($errors == 0) { // all fields successfullty validated.
$message = "Message: " . "\n" . $message;
$message = "Name: " . $name . "\n\n" . $message;
$message = "Email: " . $from . "\n" . $message;
mail("website@avayoupaint.com", 'Contact Form: ' . $name, $message = "Sender IP Address: " . $_SERVER['REMOTE_ADDR'] . "\n\n" . $message, "From: website-html@avayoupaint.com");
setcookie('tntcon', ''); // delete the cookie so it cannot sent again by refreshing this page
header('Location: success.php'); // redirect to success page
exit();
}
}
?>
<html>
<head></head>
<body>
<article id="contactForm">
<span class="error">* All fields are required</span>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" name="form1" id="form1">
<span class="contactTitles">Name:</span>
<input name="name" type="text" id="name" value="<?php echo $name;?>"/><span class="error"><?php echo $nameErr;?></span>
</form>
</article>
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2020-05-12 12:38:14
在頁面加載時，在所有 HTML 准備好並加載到頁面之前，您獲取scrollingElement變量的腳本會立即運行。 您需要等到所有內容加載完畢，否則腳本將找不到document.body object 來附加卷軸 animation。 這尤其是一個問題，因為該腳本位於 HTML 文檔之前。 瀏覽器在收到腳本后立即執行，他們不會等到整個文檔加載完畢。
jQuery 為您提供了document.ready事件處理程序來包裝您的 Javascript，以便主腳本等待頁面位於 state 中，其中所有 HTML 已加載（還有一種本機 JS 方法可以做同樣的事情，但是因為您使用的是 jQuery，所以我們會這樣做）。 實際上，您當前的站點中已經有一個這樣的示例，就在底部附近。
將 scrollingElement 放在 function 內部也更有意義——它作為一個全局元素沒有太大意義，因為它只在 function 中使用。
<script type="text/javascript">
$(document).ready(function() {
function scrollSmoothToBottom() {
var scrollingElement = document.scrollingElement || document.body;
$(scrollingElement).animate({ scrollTop:document.body.scrollHeight }, 500);
}
scrollSmoothToBottom();
});
</script>
請注意，在此腳本塊運行之前，此版本需要加載 jQuery。 output 腳本塊位於頁面的<head>部分的某處，就在加載 jQuery 的<script塊下方。
jQuery在多步驟表單上驗證失敗后中斷
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.