如何控制HTML5表单验证的scrollTop？
HTML5表单验证的scrollTop可以通过以下方式进行控制：
- 使用JavaScript获取表单元素，并添加事件监听器来捕获表单提交事件。
- 在事件处理程序中，使用event.preventDefault()方法阻止表单的默认提交行为。
- 使用JavaScript获取表单元素的scrollTop属性，该属性表示元素内容的垂直滚动条位置。
- 根据需要，可以将scrollTop设置为0，将表单滚动到顶部，或者设置为一个特定的值，将表单滚动到指定位置。
- 在处理完滚动位置后，可以继续执行其他操作，如表单验证、数据处理等。
需要注意的是，scrollTop属性只适用于具有滚动条的元素，例如div或textarea。对于整个HTML文档的滚动，可以使用window对象的scrollTo()方法。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
相关·内容
1回答
HTML 5本机表单验证回调
、、、、
我得到了一个包含一系列动态表单域的表，我使用html5和bootstrap 3来控制我的站点。
我决定，因为只有我会使用这个应用程序，我可以使用本地HTML5表单验证。
我想知道的是，我如何检测表单上是否存在验证错误，如果有，如何控制表单执行的其他操作？
之所以这样问，是因为我正在验证动态字段并将某些字段设置为禁用，但随后在提交时启用它们，如果我这样做了，验证例程会捕获它们，并且在需要时无法重新禁用它们
非常感谢您的帮助
浏览 2提问于2014-01-31得票数 3
我对需要输入的内容使用简单的HTML5表单验证：
<input type="text" required>
但是，页面上有一个固定的标题，块下会显示带有错误的输入。有没有办法在整个网站上控制验证事件的scrollTop？
另外，如果这个问题听起来很奇怪，请解释为什么。谢谢!
P.P.S.
浏览 31提问于2018-07-16得票数 0
回答已采纳
1回答
HTML5增加了在表单中更好地定义客户端验证的能力，而不需要使用JavaScript。这个概念已经存在于诸如“最大长度”和“最小长度”等属性中。它已经用诸如“必需”和“模式”等属性进行了扩展。然而，HTML5也定义了对这些属性的限制，WebKit浏览器已经实现了这些限制(很可能是火狐和Opera紧随其后)。
当CSS / JavaScript使用display: none或visibility: hidden CSS规则隐藏窗体控件时，display: none与表单控件的可见性有关。这些限制的定义是：
4.10.7.1.1隐藏状态
当input元素的类型属性处于隐藏状态时.input元素表
浏览 0提问于2011-08-04得票数 30
回答已采纳
2回答
在HTML页面中，有5种不同的表单。其中四个是在引导模式下。主表单提交中的所有表单都会弹出HTML5验证。除了提交表单之外，我们如何禁用表单的HTML5验证？
浏览 5提问于2016-11-24得票数 0
回答已采纳
1回答
如何在structr中验证表单？
当我在“提交”按钮的“编辑模式绑定”选项卡的Action属性中添加"create:MyType“值时，HTML5表单验证停止工作。
我已经验证了删除Action可以使HTML5验证正常进行。
我做错了什么吗？
浏览 1提问于2014-12-02得票数 0
1回答
如何在vuejs 2中与自定义组件的形式一起使用html5 form.checkValidity()？
对于html5输入，表单验证工作得很好：
<form name="myform" ref="formref">
<input type="text" required />
<button type="submit" @click="submitForm">Ok</button>
</form>
...
methods: {
submitF
浏览 0提问于2021-10-07得票数 0
通常，HTML5表单验证在submit事件之前运行。
有了这个
<form id="myForm">
<input type="text" name="foo" required />
<button type="submit"> Submit </button>
</form>
<script>
$("#myForm").on('submit',function(){
conso
浏览 4提问于2017-05-17得票数 33
回答已采纳
我有一个HTML5表单，它调用Perl控制器将文件上传到服务器。它起作用了。问题是，如果没有选择任何文件(如果表单框为空白)，并且用户单击该按钮，他将得到一个令人讨厌的Perl错误消息(“在.第39行等处要求文件”)。我想添加一个功能，如果表单是空的，就会出现一条消息：“它是空的！”在视图中，这只能用HTML5来完成吗？或者我需要修改我的Perl脚本？
我的HTMl5看起来像：
<form action="[% uri_for('/upload/execution') %]" method="post" enctype="multi
浏览 4提问于2013-08-07得票数 0
回答已采纳
1回答
各位，我混淆了HTML5验证和角度表单验证。
我想知道在验证表单HTML5或角自己的表单验证方法时应该使用哪种验证。
还请考虑解释：
为什么为什么不。
你觉得哪个好
更安全。
浏览 1提问于2018-07-24得票数 1
2回答
AMP表单只允许我使用HTML5表单验证来验证用户的输入。它在桌面Chrome浏览器中工作得很好。但是Safari到目前为止还不能支持HTML5表单验证。我找到了解决方案，需要外部Javascript在Safari浏览器上实现表单验证。但就我而言，AMP不允许我这么做。
是否存在绕过Safari的HTML5验证输入的任何黑客或技巧？
浏览 11提问于2017-02-07得票数 0
回答已采纳
1回答
在ma网页上，我有一个带有验证字段的表单。当用户将不正确的数据放入表单并单击“发送”按钮时，视图会翻转回顶部页面，而不会看到表单。然后，他必须向下滚动以查看和输入有效数据。我在控制器中使用此代码：
[HttpPost]
public ActionResult Index(ContactForm contact)
{
return View("Index");
}
我希望在输入不正确的数据后，用户必须看到表单部分(部分名称为"#contact")和验证信息(错误的地方)，但不像当前的顶
浏览 2提问于2016-01-01得票数 1
1回答
Symfony 2文档向您展示了如何基于实体创建表单，并在提交时在控制器中对其进行验证，以确保某些字段已在服务器端填充。
但是，在查看用于身份验证的文档时，它使用了一种非常不同的方法来创建和处理表单，您可以简单地为check_login定义一个路由，而不需要控制器声明，因为它是由安全捆绑包来处理的。
由于登录/身份验证检查现在由安全捆绑包处理，因此您无法像表单验证文档所示那样在控制器中实现任何验证。
如果没有HTML5 required标记，您就可以使用空输入向登录表单发送垃圾邮件。
如何根据Symfony身份验证文档为电子邮件和密码字段添加表单验证：
另外，当提交不正确的凭证时，简单的错误提
浏览 0提问于2012-12-20得票数 4
不确定是否还有其他问题，如果是的话，我道歉，请不要释放猎犬。
使用html5文档类型并快速关闭我的console.log侦听器，它告诉我scrollTop()的值。我基本上是这样做的，所以当我滚动经过一个点时，我改变了元素的不透明度。我正在使用MVS解决方案来做这件事，我没有能力将其推送到外部站点，以便您可以查看。下面是一个简短的代码片段：
var opacity = 1;
var scrollTop = $('body').scrollTop();
if (scrollTop > 200) {
opacity = 0.1;
}
$('#element).c
浏览 1提问于2012-10-18得票数 32
回答已采纳
2回答
JQuery验证拦截所需的属性。
<input type="text" required />
这将迫使客户端对该字段进行验证，这是很棒的。现在，这也是HTML5规范的一部分，并导致支持该规范的浏览器显示验证消息，即使禁用了JavaScript。
在我的应用程序中，我已经构建了服务器端验证，我对此很满意，所以我想停止这种行为。因此，我的问题是，如何禁用此HTML5表单验证？
更新似乎有些混乱，基本上我对JQuery验证解释和验证触发很满意。但是，如果用户禁用了JavaScript，我希望验证返回到我已经编写的服务器端验证。但是，由于JQuery验证和HTML5共享相
浏览 3提问于2013-06-20得票数 5
回答已采纳
2回答
我有以下表格。我喜欢新的HTML5表单验证，我更愿意保留它。然而。我不喜欢按下按钮刷新页面(表单提交)的方式。
相反，我更喜欢使用按钮触发一些AJAX来刷新页面元素，而不刷新整个页面。但是，当我设置type="button"时，所发生的情况是，当按下按钮时，HTML5表单验证将停止触发。
如何使用HTML5表单验证，同时不触发刷新/提交页面的传播？
请注意，我并不关心这个问题的AJAX元素，只关心HTML5验证问题。
echo "<form>";
echo "<td><input id=\"link_add_titl
浏览 2提问于2013-11-16得票数 7
回答已采纳
我正在使用Cucumber测试web应用程序的行为(在幕后使用Selenium和Watir )。我的web应用有HTML5页面，并使用了新的"required“属性。如果我有一个包含必填字段的数据输入表单，而我提交的表单中该字段为空，我想验证web应用程序是否正确地响应了错误条件。
不幸的是，当使用HTML5 web浏览器进行测试时，失败的字段验证上弹出的错误消息似乎无法通过web驱动程序访问。在任何情况下，表单都不会提交，页面将保留在数据输入表单上。
另一方面，当测试headless或使用非HTML5兼容的浏览器时，表单可能会提交，从而允许我的web应用程序捕获错误并将用户返回到表单
浏览 6提问于2012-06-02得票数 20
我使用react-hook-forms作为我们的应用程序表单的功能/验证，并使用MUI/Material作为我们的组件库。如果输入具有required属性集，则MUI将自动将required附加到输入标签中，但是，当我们将required属性添加到输入中时，HTML5表单验证优先于使用rules支柱进行react-hook-form验证。
我们如何将这两个概念结合使用，以便MUI在所需字段上附加*，但是react-hook-form的rules验证被应用而不是HTML5 5的验证？
浏览 20提问于2022-11-22得票数 0
我正在编写表单，并将html5验证属性添加到它的输入中，比如"required“、"autofocus”。我使用Javascript通过document.myForm.submit()提交表单，但它不会根据html5验证属性验证表单，因为它们不在那里。
有什么建议吗？
浏览 1提问于2011-07-28得票数 17
回答已采纳
3回答
我正在使用html5/javascript/jQuery/css进行移动应用程序开发。我在应用程序中有多个文本。当我点击输入时，键盘弹出(android选项卡)。但是文本区域会停留在页面上的位置。如何在弹出键盘时滚动页面。
浏览 0提问于2013-08-27得票数 11
回答已采纳
我正在使用JQM (jQueryMobile)和HTML5开发一个移动网站，我想知道(继续使用HTML5)正确的语法是什么？
我目前正在做的事情
<input type="text" name="phone" id="phone" class="required" placeholder="Phone Number*" />
HTML5版本(不需要双引号)
<input type=tel name=phone id=phone required placeholder="Phone Num
浏览 0提问于2011-03-30得票数 0
回答已采纳
我在HTML5中创建了一个小型联系人表单，并使用‘js’进行客户端验证。此表单通过服务器上的php处理。但是，我没有服务器端验证.只有客户端通过HTML5进行验证.
我的问题是:我只能用HTML5和js进行客户端验证，还是也需要进行服务器端验证？
谢谢。
浏览 0提问于2014-01-10得票数 0
回答已采纳
我正在开发一个ASP.NET核心web应用程序，其中我使用DataAnnotations来使用验证属性来修饰我的视图模型。当我打开一个包含输入的详细页面时，我看到核心向呈现的超文本标记语言添加了HTML5验证属性(即data-val="true")。
但是，当用户单击Save按钮时，我编写了自定义客户端代码，如下所示：
$(document).on("click", "#SaveAsset", function (event) {
event.preventDefault();
Asset.Save();
浏览 0提问于2017-04-03得票数 2
安装程序
带有2选项卡的HTML(用引导带选项卡生成导航)
这两个选项卡都完全由一个表单标记包围。
有一个提交按钮，它经常显示，独立于哪个选项卡当前处于活动状态
只有选项卡1包含表单字段(表单字段具有HTML5“必需”-attributes)
情况
用户有标签号2 active.
...and火灾“提交”
让我们假设，在选项卡1中存在HTML5验证错误()
问题
HTML5 5-验证没有显示(因为用户的选项卡2是活动的，错误显示在表1中)
用户必须手动切换到选项卡1才能看到错误。
问题
在这种情况下，我如何管理自动切换到选项卡编号
浏览 5提问于2013-08-17得票数 3
回答已采纳
1回答
对表单验证技术进行了研究。我知道Ember不知道如何使用属性验证模式(required，HTML5 )。为此，需要在模型中为每个表单创建具有算法验证的函数。并在单击submit按钮时运行该函数
我有一个问题:我有可能显示无效输入的标准HTML5错误消息吗？
例如:我检查了所有字段(在Ember模型中)，其中一个字段无效。我们需要这个字段来显示，注意这个字段在帮助中是无效的(可能为这个元素运行HTML5()函数)，怎么做呢？
浏览 1提问于2013-07-17得票数 2
回答已采纳
2回答
表单提交后，滚动到表单
、、、
如果这是一个副本，我很抱歉(我到处搜索可能的解决方案)，但是在用Laravel提交表单之后，我只需要知道如何使用jquery代码。
FYI:当表单凭证正确时，我使用的是Laravel，我使用的是重定向：：back()。
以下是我在提交表单时使用的Controller代码：
public function store()
{
$user = array(
'voornaam' => Input::get('voornaam'),
'achternaam'
浏览 4提问于2014-08-19得票数 1
回答已采纳
1回答
我有一个包含多个表单步骤的vue.js表单，需要简化html5验证，如下所示：
<template>
<div>
<div v-if="activeForm === 1">
<h2>
How much does {{ form.name }} weight?
</h2>
<text-input
v-model="form.weight&
浏览 0提问于2019-08-01得票数 1
回答已采纳
当用户提交表单时，我有一个冻结面板弹出，阻止用户单击页面中的任何其他控件。这与验证我的MVC服务控制器上设置的属性中的表单控件一起工作得很好。
问题是当用户输入电子邮件地址时，帐户名和@ someName @email.com之间有一个空格。我收到一个小的白色弹出框验证错误信息，指向电子邮件文本框。我猜它来自jQuery，因为Create控制器方法从不触发。最大的问题是冻结面板保持在适当的位置，所以在刷新页面之前无法纠正这个问题。
当涉及到jQuery时，我是个新手，对如何纠正这个问题感到迷茫。我猜我需要确定jQuery何时对不正确的电子邮件地址启动了验证异常，这样我就可以将冻结窗格的css属
浏览 4提问于2013-09-22得票数 0
回答已采纳
2回答
我使用的是jQuery 1.11.1和
我在我的联系人表单中添加了以下脚本来验证它并通过AJAX发送({{hash_tag}}在代码中是Twig变量)：
<script>
$("#contactform").validate({
rules: {
content_{{ hash_tag }}: {
required: true,
minlength: 20
},
name_{{ hash_tag }}:
浏览 2提问于2014-06-01得票数 0
回答已采纳
7回答
我只想使用服务器端验证来验证我的表单。但是，如果浏览器支持HTML5，它将使用symfony2添加到表单的HTML5属性进行验证，因此我需要阻止HTML5验证。
浏览 0提问于2012-04-13得票数 46
回答已采纳
如果使用Selenium测试我的webapp。webapp中的所有表单验证都是使用HTML5表单验证完成的。有没有办法断言表单/输入验证是否是使用Selenium触发的？
浏览 0提问于2012-02-07得票数 16
2回答
Drupal 8自定义表单错误
、、、、
如果我在Drupal8中添加一个表单，或者在时事通讯表单中使用像Simplenews这样的模块，那么所有的错误都是html5弹出窗口。如何才能使错误具有自定义消息并以内联方式显示？谢谢
浏览 1提问于2017-05-11得票数 0
2回答
我正在用HTML5和Javascript开发Windows 8 metro风格的应用程序
我的问题很简单，如何编写带有验证的简单表单？
<form id="loginForm">
E-Mail:
<input id="login-email" type="email" name="Username" oninvalid="this.setCustomValidity('Enter email pls')"
maxlength="40
浏览 0提问于2012-10-05得票数 0
回答已采纳
5回答
在浏览器中禁用表单验证
、、、、
我在一个网站上编写表单，并使用HTML5验证-到目前为止还没有火箭科学。在Google Chrome中一切正常，但我想确保即使是没有表单验证的IE6用户也不会在我的MYSQL数据库中插入格式错误的数据。
有没有办法在Google Chrome或其他最先进的浏览器中关闭HTML5表单验证来测试服务器端数据验证？
浏览 0提问于2012-02-23得票数 17
回答已采纳
1回答
所以我读了很多文章说HTML5表单验证是可以访问的(阻止表单提交的东西required属性是一个空白字段)，但是当我在Chrome上和BackTalk上测试我的表单时，如果我没有填写输入，它就会返回到输入字段(这很好！)但是两个屏幕阅读器都宣布“请填写这个字段”，这对用户来说是无用的，因为他们没有宣布该字段的标签。
那么，仅靠HTML5验证是不可访问的？另外，您能结合HTML5验证和自定义JS吗？
是否必须编写自定义客户端站点验证才能使表单可访问？
浏览 2提问于2020-01-23得票数 5
回答已采纳
在html5表单中使用symfony2验证具有很好的功能。
在互联网上搜索了一段时间之后，我发现了这个伟大的解决方案：
但这始终只给我提供了one验证消息。
请输入一封有效的电子邮件好吗？
多个验证-消息呢？就像文档中描述的那样：
因此，我可以在html5表单验证中使用one消息，也可以对多条消息使用普通验证(如链接中的验证)，但是没有像html5这样的客户端验证(当然，我可以实现一些验证功能，但我更喜欢使用内置的html5功能)。
编辑:我做了一些研究，看起来这个html5表单-验证与symfony2框架无关，对吗？因此，基本上没有创建太多的客户端代码，我
浏览 3提问于2013-03-04得票数 0
在Firefox39.0和IE11中，如果HTML5文档具有doctype <!doctype html>，document.body.scrollTop将始终返回0。
例如：
<!DOCTYPE html>
<!--doctype-->
<html>
<head>
<title>Sample page</title>
</head>
<body>
Aliquip summis doctrina admodum, pariatur praesentibus non la
浏览 2提问于2015-08-06得票数 1
回答已采纳
6回答
当涉及到表单验证时，哪种方法是最好的？使用HTML5，您可以验证电子邮件地址和电话号码，但我通常会使用PHP来验证，那么哪种方法更好呢？或者我应该在HTML5和PHP中验证输入？
浏览 2提问于2011-12-08得票数 3
回答已采纳
我正在尝试将html5实现到表单中，但是当我通过jquery提交表单并尝试使用html5“html5”属性时，遇到了一个问题。
下面是我的表单，非常简单：
<form action="index.php" id="loginform">
<input name="username" required placeholder="username" type="text">
<a href="javascript:$('#loginform&
浏览 12提问于2012-07-08得票数 38
回答已采纳
2回答
我在使用ajax提交表单时遇到了一些问题。
由于HTML5表单在输入标记中已经有了“必需的”验证，因此不需要进行javascript验证检查。然而，正因为如此，我不知道如何在通过验证检查后使用javascript(jQUERY)来提交表单。换句话说，我如何知道验证检查是否通过？
例如：？？条件？？(在加载提交的页面之前，我应该设置什么条件)？("div").load(finishSubmittingForm.html ) }；
有什么想法吗？
谢谢
浏览 0提问于2011-05-07得票数 5
回答已采纳
我正在尝试为我的web应用程序实现html5表单验证，但它在safari 5.0.1、iphone3或android2上不起作用。这些浏览器是否不支持表单输入属性、模式或任何与验证相关的内容，或者我犯了一些错误？
它与mozilla、chrome和opera协同工作。如果我使用html5表单验证，那么我需要再次编写代码作为回退。使用这种或更老的方式作为jquery和普通的javascript是个好主意吗？如果谁有想法，请告诉我。
请查看此链接(我写了一些代码)，并在iphone、android或safari中试用：
浏览 0提问于2011-08-16得票数 11
1回答
我有一个有几个字段和两个按钮的网页表单。所有字段都需要验证。
如何根据每个按钮(如验证组)使用html5必需的属性对字段进行分组？
浏览 5提问于2014-07-16得票数 0
回答已采纳
9回答
我使用HTML5来验证字段。我只需点击一下按钮就可以使用JavaScript提交表单。但是HTML5验证不起作用。只有当then输入类型为时，它才有效。除了使用JavaScript验证或将类型更改为submit之外，我们还可以执行其他操作吗
这是HTML代码：
<input type="text" id="example" name="example" value="" required>
<button type="button" onclick="submitform()"
浏览 3提问于2013-05-23得票数 62
回答已采纳
我在其他地方看不到这个问题，希望这是一个快速而简单的问题。
如何在我的表单(ruby on rails)中使用HTML5验证器，比如'required‘？
例如，如果我在其中使用HTML5验证，这个基本表单会是什么样子？
<%=form_for @testimonial do |t|%>
<dl>
<dt><label for="testimonial_rating">Rating</label></dt>
<dd><%=t.select :rating, Testimo
浏览 3提问于2012-11-24得票数 67
回答已采纳
当谈到角2验证时，我看到了不同的方法。基本方法是使用HTML5和模板/模型绑定，或者使用赋值验证器的表单。
然而，当涉及到特殊的规则时，需要大量的编码和模板绑定(所以没有表单)，这主要导致验证被分散在HTML和TS代码中。
另外，关于验证的另一件烦人的事情是，您需要修改TS中的验证规则，还需要添加额外的HTML代码来在页面上呈现这些值(尽管这可以通过指令实现自动化).
无论如何，理想的解决方案是使用规则对属性建模，然后生成对控件的错误消息。类似于.NET、fluent验证和ModelState，或者类似于Aurelia.io验证的JS世界：
在Angular2+中也有类似的可能吗？
如
浏览 9提问于2018-01-10得票数 2
1回答
如何在视口中启动CSS3动画
、、、、
我有一个用CSS3制作动画的条形图，该动画当前在页面加载时被激活。
由于页面加载时条形图不在视图中，因此您必须向下滚动才能看到它，当您到达它时，动画已经加载。所以我尝试做的是，当有人使用js滚动到CSS3动画时激活它。
下面是我正在尝试做的一个示例：
我想我在.js和.css中遗漏了什么或者做错了什么。
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.skiller #skill');
// If the ani
浏览 2提问于2013-08-21得票数 1
5回答
最近，我探讨了HTML5表单验证这一新的(对我而言)的主题。我成功地测试了它，但我仍然对如何和为什么使用它感到困惑。让我用一个简单的例子来解释一下。
我的表单有10个字段(文本、数字、日期.)；每个字段都有自己的required和pattern。
visual验证非常有效；每个字段都显示Go/NoGo状态:这很好。
但是，当使用javascript提交表单时，我应该重新验证每个字段吗？
换句话说，HTML5验证只是一个可视的工件；它不阻止表单提交。如果用户不考虑红旗而输入错误的内容，他可以这样做。
如果我对此是正确的，为什么我应该使用HTML来做一些我可以(而且必须)用JS做的事情？也许JS可
浏览 8提问于2016-12-01得票数 3
回答已采纳
1回答
我还有一个小问题，我在html5表单中使用数据规则范围=“14，30”作为范围。我使用jquery的多步表单插件，它使用jquery。如何使用该字段仅使用字母表。我可以使用类似于数据regex？
浏览 0提问于2014-07-16得票数 0
回答已采纳
我使用了jQuery日期选择器，如果用户输入日期而不是从jQuery日期选择器获取日期，我想用HTML5模式限制我的输入字段。
如何使用HTML5模式限制我的用户，使他们只需在表单mm/dd/yyyy中键入日期
浏览 3提问于2013-06-13得票数 29
回答已采纳
如何在不使用JavaScript的情况下验证表单？我已经使用了必需的HTML5属性，但由于IE不支持IE (令人讨厌)，有没有办法使用PHP来解决这个问题，这需要时间。
谢谢
浏览 2提问于2012-07-11得票数 1
回答已采纳
3回答
HTML5属性优先级
、、、
Html5有新的属性，比如表单元素的novalidation属性和输入元素的required元素。
当同时使用这两种类型的属性时，哪种属性具有更高的优先级，是表单属性还是输入属性？
浏览 7提问于2011-06-10得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
