Trying to create a form validation for the 'Agree to Information' page. The user must scroll down to proceed, without a checkbox at the bottom of the box. If the user clicks continue/agree without scrolling, an error div element should display with the message 'Scrolling to the bottom of the information is required'. This message should be a clickable anchor link that highlights the box in color. See below for code and image:
(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>
If there are any missing pieces or alternative solutions, please advise.