gpt4 book ai didi

javascript - 不使用angularjs向下滚动时如何验证表单?

转载 作者:数据小太阳 更新时间:2023-10-29 05:38:02 33 4
gpt4 key购买 nike

我正在尝试验证名为“同意信息”的页面的表单。在这里,用户必须向下滚动才能向前移动(记住框底部没有复选框,相反用户必须一直向下滚动直到滚动结束),如果用户单击继续/同意按钮而不滚动,必须显示一个 div 元素/错误,说“需要滚动到信息的底部”(必须是 anchor 链接,单击它应该用颜色突出显示该框)。这是代码和图片

 (function(){
angular
.module('agreeToInfoApp',[])
.directive('execOnScrollOnBottom', [function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var fn=scope.$eval(attrs.execOnScrollOnBottom),
clientHeight=elem[0].clientHeight;
elem.on('scroll',function(e){
var el=e.target;
if ((el.scrollHeight-el.scrollTop) === clientHeight) {
elem.addClass('class-summary')
scope.$apply(fn);
};
});
}
};
}]);
})();

HTML:

<body>
<div class="class-summary">
<div class="open">
<p>Some Information Missing</p>
<ul>
<li>Please scroll down to lookup the information</li>
</ul>
</div>
</div>
<form name="myform" >
<div cols="3" exec-on-scroll-on-bottom name="agreeTerms" class="agree-terms" >
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
<p>adsfadfad</p>
</div><br>
<input type="submit" value="Continue" >
</form>
<script type="text/javascript" src="../../lib/angular.js"></script>
<script type="text/javascript" src="app.js"></script>

请让我知道我在这里缺少什么或者还有其他方法吗?

Agree To Information Page

最佳答案

您的情况只需要稍微调整一下就可以了。

if (el.scrollTop === el.scrollHeight - el.offsetHeight) {
// scrolled to bottom
}

JSFiddle 演示:http://jsfiddle.net/030d6pb0/

关于javascript - 不使用angularjs向下滚动时如何验证表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35676614/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com