表单验证失败后向下滚动到表单

Question

我有一个 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>

Answer 1

在页面加载时，在所有 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块下方。

表单验证失败后向下滚动到表单

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-12 12:38:14

表单验证失败后向下滚动到表单

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-12 12:38:14

解决方案1
0 已采纳 2020-05-12 12:38:14