Error message stuff

by Sparrow Squire

HTML

<!-- First --> 
<div>
  <p>Hello</p>
</div>
<p></p>

<!-- Second --> 
<div id="container">
    <div id="element"></div>
    
    <div class="form-field lrg-field">
        <label for="cardaddress" class="required">Address Line 1&#58;</label>
        <input {% if page.formValidation.errors.cardaddress %}class="error" {% endif %} type="text" value="{{page.posts.cardaddress}}" size="25" name="cardaddress" id="cardaddress" />
        <div class="error-message">{{page.formValidation.errors.cardaddress}}</div>
    </div>
</div>

CSS

div {
    border: 1px solid red
  }
  p {
    border: 1px solid teal
  }

#container {
    margin-top: 50px;
    height: 550px;
    border: 1px solid red
}
#element {
    height: 50px;
    border: 1px solid teal
}

JavaScript

// First
var p = $( "p:first" );
var position = p.position();

$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );


//Second
$('#element').offset({
    top: 10
});


    if(!$('#terms_agreed').prop('checked')) {
        $('.confirm-checkbox').addClass('error');
    }

if ($('#transaction-details').find('.error:first')) {
    $('.error:first').css('border', '3px solid teal');
    $(window).scrollTo('.error:first');
    
    
          
        // var termsAgreed =  document.querySelector('.error');
        //        
        //	    setTimeout(function(){
        //          termsAgreed.scrollIntoView();
        //        }, 0)
            //tempScrollTop = $('.error:first').scrollTop();
             //alert(tempScrollTop);
             // $(window).scrollTop(tempScrollTop);
    
    
        /*
        var elementTop = $('.error:first').closest('.form-field').position().top;
        alert(elementTop);
        $(window).scrollTop(elementTop);
        */
}