Read the Agreement Validator

Recently a client wanted to have a user agreement added to an enrollment form. The catch was that I needed to confirm that the user had at least scrolled through the text before allowing them to continue on with the form submission. Once again, jQuery to the rescue!


<div class="agreement">
  <div class="agreement-inner">
    Content for agreement goes here...
<div class="agreement-agree">
  This is the stuff I want activated when the agreement has been read.

jQuery JavaScript:

$(".agreement").scroll(function() {
  if ($(this).scrollTop() >= ($('.agreement-inner',this).height() - $(this).height())) {

I’m currently working on deploying this to a generic jQuery plugin that will let you specify the content that needs to be scrolled through as well as the content should become enabled once that criteria is met.