我有一个页面可以验证,并且在该字段旁边显示相关的验证消息。
我希望页面滚动到第一次验证失败的页面部分 用户单击“保存”按钮时会显示该消息
主题是我想滚动到具有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
的{{1}}可见性属性
hidden
答案 0 :(得分: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);
});
这将滚动到作为元素子级的父元素,以显示标签,输入字段和错误消息。不仅是错误消息。
答案 1 :(得分:0)
如何使用属性选择器?
这不是仅针对您的情况的最佳解决方法。
$("#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>