Прокрутите до той части страницы, где отображается сообщение о первой неудачной проверке

Question

У меня есть страница, которую я проверяю, и рядом с полем отображается соответствующее сообщение проверки.

Я хочу, чтобы страница прокручивалась до той части страницы, где отображается первое сообщение о неудачной проверке, когда пользователь нажимает кнопку сохранения.

Актуально я хочу прокрутить до элемента с классом 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);
});

Answer 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);
});

Это приведет к прокрутке до родительского элемента, который является дочерним элементом тела.показать метку, поле ввода и сообщение об ошибке.Не только сообщение об ошибке.

Answer 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>