Call Alert Function from within Fancybox Popup Window - iFrame and Same Origin Policy

Question

I Have a fiddle:

http://jsfiddle.net/nicorellius/4vQ9S/

The alert fires on show start and show over and close, but binding to the button click is eluding me.

I have a fancybox popup that works. It's a form:

The HTML is a simple table:

<form id="my-form" method="post" action="">
    <table>
        <tr>
            <td>
                <label for="name">Name</label></td>
                <input type="text" id="name" name="name">
            </td>
            <td>
                <input type="submit" value="Submit">
            </td>
        </tr>
    </table>
</form>

The link that triggers fancybox:

<a class="fancy-popup" href="test.html" data-fancybox-type="iframe">

I have a simple script that calls some functions:

$(document).ready(function() {

    function before_show() {
        alert("fancybox before show");
    }

    function after_show() {
        alert("fancybox after show");
    }

    function on_close() {
        alert("fancybox after close");
    }

    function alert_me() {
        $.fancybox.inner.find('iframe').contents().find('input.click-me').click(function() {
            alert("fancybox has been foiled!!!");
        });
    }

    $(".fancy-popup").fancybox({
        openSpeed     :    'slow',
        openEffect    :    'fade',
        minWidth      :    '200',
        minHeight     :    '100',
        maxWidth      :    '400',
        maxHeight     :    '150',
        scrolling     :    'no',
        beforeShow    :    before_show,
        afterShow     :    after_show,
        afterClose    :    on_close,
        //afterShow     :    alert_me
    });
});

I'm realizing that I cannot do this within the iFrame, because of the same origin policy. I can't figure out for the life of me how to get this to work.

NOTE

Please note that the question has changed since its inception, so the answer below referring to validation is not applicable.

Answer 1

After a lot of pain, I decided to rework this without using an iFrame. I thought the iFrame was the best way to go but then realized I was wrong, at least at my current level of understanding. However, with this method, I can successfully call the alert from the fancyBox popup:

http://jsfiddle.net/nicorellius/d4KVs/

I think I can use my existing validation here too.

Here is HTML that changed:

<a href="#test" class="fancy-popup">fancy link</a>

I put the HTML in one place and referenced it using existing fancyBox techniques.

I didn't give up all the way, however. I kept on fiddling with it and found a solution using the iFrame. Not sure exactly what I did, but I set up original plan, and used the script:

    function alert_me() {
        $.fancybox.inner.find('iframe').contents().find(
            'input.click-me').click(function() {
                alert("fancybox has been foiled!!!");
        });
    }

and now the alert box pops up within the iFrame fancyBox.

The thing is with this solution is: it may be limited to the same domain I'm on, so in production it probably wont work. I ran a quick test and it seems to work cross domain but I have a feeling it'll cause me trouble in the future...