Get Parent Page To Scroll To Top When Iframe's Form Validation Fails

A client wants to adapt an existing form for their site-wide subscription application. Due to the way the site is laid out, the easiest way to implement this was to have an iframe

Solution 1:

The solution for this was to use window.postMessage.

In the parent window, I had

function receiveMessage(e){

  console.log("Received Message: " + e);

  if (e.originalEvent.origin === 'http://www.site.client.com') {
    $("html, body").animate({
        scrollTop : 441
    }, "fast");
  }
}
$(window).bind("message", receiveMessage);

and added this for the original js code for the iframe content:

window.parent.postMessage("Scroll", "http://www.site.client.com/");

This results in the iframe posting a message that is captured by the parent. Since this is the only message posted, I use it to trigger the scroll event if and only if the domains match.

Solution 2:

$('form#ContactForm').bind('submit', function(event){ 
    if ( !validation ) {

        var error ="Please fill out the entire form";
        $('#formErrors').text(error);
        if (window.top != window) {
            $('html,body').animate({
                scrollTop: $("#formErrors").offset().top},
                    'fast');
            }
        }
    } else {
        //execute ajax submission here
    }
}