Question

我正在制作一个“你给我你的电子邮件，我会给你一首精彩的歌曲”页面给配偶的乐队。我想在jQuery Facebox插件中提交时，尝试使用简单的javascript表单（电子邮件）验证。我发现你需要在 Facebox打开后绑定JS验证函数，否则它不起作用。这样做的基础在Facebox文档中列出，应该是这样的：$(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })。如下所述，我不认为这应该是这种情况，因为我认为Facebox只显示了一个隐藏在Facebox CSS参数中的隐藏元素，但只有在打开Facebox时才需要绑定到事件处理程序。

好吧事实证明我无法让它工作（除了在Firefox中，这意味着使用Firebug进行调试有点不行！） - 您可以将任何旧的gumpf放入电子邮件表单并提交它并愉快地发送确认“asdsdf”或我当时输入的内容。

代码如下，我非常感谢任何帮助！

感谢您的时间。

富

<!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 == "Enter Email Address") ? this.value = "" : 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>

Answer 1

Facebox会复制你指向它的任何页面元素......它不只是隐藏/显示带有额外css处理的页面元素，使其看起来像一个模态。

例如，如果你有一个id ='x'的表单，那么在facebox运行之后，你实际上将有两个表格，其中id ='x'... facebox创建的表格是你的原...和你原来的。在DOM树中，facebox元素（用户看到的元素）将是第2个......并且在facebox创建它之前不存在。

Answer 2

John Q提到facebox会创建元素的副本，所以为了引用窗口中的任何元素，我给了所有类，而不是id，然后引用它：

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

然后，不幸的是，我不得不推出自己的验证，因为任何插件仍然无效。这是一个例子：

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

有点黑客，但希望有所帮助。

Answer 3

根据我对Facebox的理解，模态窗口的内容始终存储在页面中，但只是隐藏（通过display：none）直到需要。因此，在加载facebox之后，您不需要绑定验证，因为元素直接来自页面加载。

考虑到这一点，请尝试以下HTML。我已经添加了jQuery验证，因为它易于使用并节省了重新发明的轮子。轮子我的意思是电子邮件地址格式验证：）

<!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><!-- Insert your title here --></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" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script>

    <script type="text/javascript"> 
        $(document).ready(function() {
            $("a[rel*=facebox]").facebox();

            $("#user FORM").validate({
                rules: { 
                    emailAddress { required: true, email: true }
                }
            });
        });
    </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>

有很多方法可以对验证插件进行样式化，但这至少对你有用。

Answer 4

使用ajax调用存储在单独文件中的表单，这样你就不会有重复项，然后验证脚本将无问题，除了...当然取决于错误消息的提示方式给用户。

绑定验证脚本以在jQuery Facebox插件中形成

4 个答案: