I have a page which i validate and i show relevant validation message next to the field.
I want page to scroll to part of the page where first failed validation message is shown when user clicks the save button
Topically i want to scroll to an element with class row-validate
which has 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
below code will scroll me to first element which has class row-validate
but it wont check if it has visibility:visible
visibility property as visible
or hidden
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(".row-validate").offset().top
}, 2000);
});