我有一个要验证的页面,我会在该字段旁边显示相关的验证消息。
我希望页面滚动到第一次验证失败的页面部分 当用户点击保存按钮时显示消息
局部地,我想滚动到具有 visibility:visible
类 row-validate
的元素。
<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
visibility 属性作为 visible
或 隐藏
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(".row-validate").offset().top
}, 2000);
});
最佳答案
试试这个,
$(".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);
});
这将滚动到作为主体子元素的父元素,以显示标签、输入字段和错误消息。不仅是错误信息。
关于javascript - 滚动到显示第一个验证失败消息的页面部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58095340/