表单验证 - 滚动过去输入框答案

【问题标题】：Form Validation - Scroll past input box表单验证 - 滚动过去输入框
【发布时间】：2016-04-13 08:19:13
【问题描述】：

我正在创建包含必填字段的查询表单。当用户按下提交按钮时，将显示错误列表供用户更正。该列表是一组与必填字段相关的标签，当用户单击它们时，它们会被带到相关的输入框中。滚动在输入框处停止，不显示输入的实际标签。

当用户选择错误输入时，如何使网站向上滚动以包含标签输入？

谢谢你:)

【问题讨论】：

我不能干涉你的设计，但我个人不喜欢错误列表。只需用红色标记无效的。要修复滚动，您只需为每个输入字段提供一个 id，并在验证后将位置更改为该 id（仅发生一次，对于第一个无效输入字段）。

标签： jquery html css forms validation

【解决方案1】：

你只需要从你想要滚动到示例的元素的顶部偏移中减去一些东西

$(".error-massage").click(function(){
    var l = $(this).attr("data-label");
    top_Offset = $("*[label='" + l +"']").offset().top;
    $(window).scrollTop(top_Offset - 100 + "px")
})

考虑到你的错误按摩列表就像

<ul>
 <li class="error-massage" data-label="name">invalid name </li>
 <li class="error-massage" data-label="pass">invalid pass</li>
 <li class="error-massage" data-label="somthing">invalid somthing</li>
</ul>

【讨论】：

【解决方案2】：

在相关无效输入的 ID 中包含一个锚点

<ul>
 <li class="error-massage">
   <a href="#input-name">invalid name</a>
 </li>
 <li class="error-massage">
   <a href="#input-pass">invalid pass</a>
 </li>
 <li class="error-massage">
   <a href="#input-something">invalid something</a>
 </li>
</ul>

无需 JS。

【讨论】：