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 pull the existing form into the new page. However, this has caused some issues with existing behavior when form validation triggers a fail.

I have an iframe in the page:

<iframe class="contactForm" frameborder="0" height="1720px" src="/path/to/contact.html" width="904px”> <p>Your browser does not support frames.</p> </iframe>

This function triggers on a submit event:

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

executes. If the form fails validation, a div element at the top of the form page is populated with the error text and a fast scroll action is animated. However, since the iframe is set to a height large enough to accomodate the original form page without any scrolling, this scroll action does not execute.

Is there any way that I can have this scroll action work in a window IF and ONLY IF this script is loaded in an iframe while maintaining the existing behavior on the original page?