Binding validation script to form within jQuery Facebox plugin

I'm making a little "you give me your email, I'll give you an AWESOME song" page for a mate's band. I'm trying to get the simple javascript form (email) validation to work when submitting from with in the jQuery Facebox plugin. I've found out that you need to bind the JS validation function after the Facebox has opened or it doesn't work. The basis for doing that is laid out with in the Facebox documentation and should go something like this: $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... }). As mentioned below, I didn't think this should be the case as I thought Facebox only showed a hidden element encased in the Facebox CSS parameters but it definitely needs to be bound to the event handler only when the Facebox is opened.

Well it turns out I just cannot get it to work (except in Firefox which meant debugging with Firebug was a bit of a no go!) - you can put any old gumpf into the email form and submit it and it happily sends a confirmation to "asdsdf" or whatever I typed in at the time.

The code is below, I'd really appreciate any help on this!

Thanks for your time.

Rich

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Track download</title> 
    <meta name="image:Background" content="images/background.jpg" /> 
    <link rel="stylesheet" type="text/css" href="reset-min.css" /> 
    <link rel="stylesheet" type="text/css" href="facebox.css" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/facebox.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() {
        $("a[rel*=facebox]").facebox();
        });
    </script>
    <script type="text/javascript"> 
    function validateForm(){       
        var x=document.forms["emailForm"]["emailAddress"].value;
        var atpos=x.indexOf("@");
        var dotpos=x.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
            alert("Not a valid e-mail address");
            return false;
        }
    }); 
    </script> 
</head> 
<body> 
    <div id="wrapper"> 
        <h1>Gorgeous George</h1><br /> 
        <h2><a href="#user" rel="facebox">Download</a> our new track!</h2><br /><br /> 
        <p>Follow us on <a href="http://gorgeousgeorgetheband.tumblr.com" target="_blank">Tumblr</a></p> 
        <p>Follow us on <a href="http://soundcloud.com/gorgeous-george-the-band" target="_blank">Soundcloud</a></p> 

            <div id="user"> 
                <form action="index.php" method="post" name="emailForm" onsubmit="return validateForm();"> 
                <fieldset> 
                    <h3 class="black">Email Address:</h3><br /> 
                    <input id="emailAddress" id="emailForm" name="emailAddress" onfocus="(this.value == &quot;Enter Email Address&quot;) ? this.value = &quot;&quot; : this.value" size="30" type="text" value="Enter Email Address" width="28" /><br /> 
                    <input type="submit" value="Submit" /> 
                    </fieldset> 
                </form> 
            </div>        <img src="images/gorgeousGeorge.jpg" alt="Gorgeous George" class="mainImage" /> 
    </div> 
</body> 
</html>

Solution

John Q mentioned that facebox creates a copy of the elements, so to refer to any element in the window, I gave everything a class instead of an id then referred to it thus:

$($('.email')[1])

Then, unfortunately, I had to roll my own validation because any plugin still didn't work. Here's one example:

if($($('.email')[1]).val().length <= 0){
    return false;
}

Kind of a hack, but hope that helps.