滚动到显示第一个验证失败消息的页面部分答案

【问题标题】：Scroll to part of page where first validation failed message is showing滚动到显示第一个验证失败消息的页面部分
【发布时间】：2020-01-25 11:10:42
【问题描述】：

我有一个要验证的页面，我会在字段旁边显示相关的验证消息。

我希望页面滚动到第一次验证失败的页面部分当用户点击保存按钮时显示消息

我想滚动到具有row-validate 类的元素，该元素具有visibility:visible。

<div class="row form-inputs">
    <div class="col-12">
        <label>Full Name *</label>
        <input name="txtFirstName" type="text" id="txtFirstName" class="form-control">
        <span id="rfFN" class="row-validate" style="visibility:hidden;">Mandatory field</span>
    </div>
</div>

<div class="row form-inputs">
    <div class="col-12">
        <label>Email *</label>
        <input name="txtEmail" type="text" id="txtEmail" class="form-control">
        <span id="rfvEmail" class="row-validate" style="visibility: visible;">Mandatory field</span>
        <span id="revEmail" class="row-validate" style="visibility:hidden;">Invalid email address</span>
    </div>
</div>

<div class="row form-inputs">
    <div class="col-12">
        <label>Mobile *</label>
        <input name="txtPhone" type="text" value="05" id="txtPhone" class="form-control" placeholder="0501234567">
        <span id="rfvphone" class="row-validate" style="visibility:hidden;">Mandatory field</span>
        <span id="revPhone" class="row-validate" style="visibility: visible;">! Enter correct mobile number </span>
    </div>
</div>

<div class="row form-inputs">
    <div class="col-12">
        <label>Company </label>
        <input name="txtCompany" type="text" id="txtCompany" class="form-control">
    </div>
</div>

jQuery

下面的代码会将我滚动到具有row-validate 类的第一个元素，但它不会检查它是否具有visibility:visible 可见性属性为visible 或hidden

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $(".row-validate").offset().top
    }, 2000);
});

【问题讨论】：

你可以使用$(".row-validate:visible") - stackoverflow.com/a/40469041/863110
JQuery: if div is visible / stackoverflow.com/questions/178325/… 的可能重复
它仍然移动到页面顶部可能是因为属性是内联的而不是类的一部分style="visibility: hidden;"
它总是移动到顶部，因为你有相同类的Mandatory field 通知总是可见的。您需要为隐藏的验证消息提供它们自己的单独类。然后:visible 将起作用，如上所述。
内联属性是在验证失败时由 asp.net webform 页面自动生成的，所以不知道如何定位它？

标签： javascript jquery

【解决方案1】：

试试这个，

$(".row-validate:visible").offset().top

已编辑：

$("#button").click(function() {
let visible = $('.row-validate').filter(function() {
    return !($(this).css('visibility') == 'hidden' || 
         $(this).css('display') == 'none');
   });

   $([document.documentElement, document.body]).animate({
        scrollTop: visible[0].offsetParent.offsetTop 
   }, 2000);
 });

或者只是

$("#button").click(function() {
  $([document.documentElement, document.body]).animate({
     scrollTop: $('.row-validate:visible[style="visibility:visible;"]').parent().offset().top
  }, 200);
});

这将滚动到作为 body 的子元素的父元素，以显示标签、输入字段和错误消息。不仅是错误信息。

【讨论】：

它仍然移动到页面顶部可能是因为属性是内联的而不是类的一部分style="visibility: hidden;"

【解决方案2】：

使用属性选择器怎么样？

这不是仅适合您的情况的最佳解决方法。

$("#button").click(function() {
  $([document.documentElement, document.body]).animate({
    scrollTop: $('.row-validate:visible[style="visibility: visible;"]').offset().top
  }, 200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-inputs">
  <div class="col-12">
    <label>Full Name *</label>
    <input name="txtFirstName" type="text" id="txtFirstName" class="form-control">
    <span id="rfFN" class="row-validate" style="visibility:hidden;">Mandatory field</span>
  </div>
</div>

<div class="row form-inputs">
  <div class="col-12">
    <label>Email *</label>
    <input name="txtEmail" type="text" id="txtEmail" class="form-control">
    <span id="rfvEmail" class="row-validate" style="visibility: visible;">Mandatory field</span>
    <span id="revEmail" class="row-validate" style="visibility:hidden;">Invalid email address</span>
  </div>
</div>

<div class="row form-inputs">
  <div class="col-12">
    <label>Mobile *</label>
    <input name="txtPhone" type="text" value="05" id="txtPhone" class="form-control" placeholder="0501234567">
    <span id="rfvphone" class="row-validate" style="visibility:hidden;">Mandatory field</span>
    <span id="revPhone" class="row-validate" style="visibility: visible;">! Enter correct mobile number </span>
  </div>
</div>

<div class="row form-inputs">
  <div class="col-12">
    <label>Company </label>
    <input name="txtCompany" type="text" id="txtCompany" class="form-control">
  </div>
</div>

<button id="button" style="margin-bottom:5000px;">Button</button>

【讨论】：