Fatal编程技术网
  • ajax/
  • Ajax 带有验证引擎和重新加载的Fancybox

Ajax 带有验证引擎和重新加载的Fancybox

ajax validation

Ajax 带有验证引擎和重新加载的Fancybox,ajax,validation,fancybox,Ajax,Validation,Fancybox,我试图在ajax fancybox中发布一个表单，并使用验证引擎进行验证。在验证和发布之后，我希望它关闭当前的fancybox，并通过一系列步骤在fancybox ajax中加载另一个页面 请帮助这是我在第一个加载页面的脚本 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

我试图在ajax fancybox中发布一个表单，并使用验证引擎进行验证。在验证和发布之后，我希望它关闭当前的fancybox，并通过一系列步骤在fancybox ajax中加载另一个页面

请帮助这是我在第一个加载页面的脚本

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1 { font-size:17px; font-family:Arial, Helvetica, sans-serif;}
body { font-size:12px; font-family:Verdana, Geneva, sans-serif;}
em {
    font-size: 12px;
}
#regShr { background-color:#e8eef9; border:1px solid #DAE0EA; padding:9px;}
.d1 { float:left; width:300px; margin-right:10px;}
.d2 { float:left; margin-right:10px; margin-top:10px;}
.button {
  -moz-border-radius: 5px;
  -moz-box-shadow: #6E7849 0px 0px 10px;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-border-radius: 5px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transition: all 0.5s ease;
  background-color: #B20000;
  background-image: -moz-linear-gradient(80deg, #D90000, #B20000);
  background-image: -ms-linear-gradient(80deg, #D90000, #B20000);
  background-image: -o-linear-gradient(80deg, #D90000, #B20000);
  background-image: -webkit-linear-gradient(80deg, #D90000, #B20000);
  background-image: linear-gradient(80deg, #D90000, #B20000);
  border-radius: 5px;
  border: 1px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-family: Trebuchet MS;
  font-size: 1em;
  margin: auto;
  padding: 10px;
  text-decoration: none;
  text-shadow: #000000 5px 5px 15px;
  transition: all 0.5s ease;
}
.button:hover {
  background-color: #FF0000;
  background-image: -moz-linear-gradient(80deg, #FF3838, #FF0000);
  background-image: -ms-linear-gradient(80deg, #FF3838, #FF0000);
  background-image: -o-linear-gradient(80deg, #FF3838, #FF0000);
  background-image: -webkit-linear-gradient(80deg, #FF3838, #FF0000);
  background-image: linear-gradient(80deg, #FF3838, #FF0000);
  padding: 10px;
}
</style>
<script type="text/javascript" src="/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/source/jquery.fancybox.js?v=2.1.3"></script>
    <link rel="stylesheet" type="text/css" href="/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<link rel="stylesheet" href="/validator/css/validationEngine.jquery.css" type="text/css"/>

    </script>
    <script src="/validator/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
    </script>
    <script src="/validator/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
    </script>

</head>

<body>
<form id="regFormFirst" name="regFormFirst" method="post" action="">
  <table width="600" border="0" align="center" cellpadding="2" cellspacing="3">
    <tr style="background-color:#900; border-bottom:#333 2px solid; padding:10px;">
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="72%"><img src="/images/logo.png" width="120" style="padding:10px;" /></td>
          <td width="28%" align="center" style="color:#fff; font-size:14px; font-family:Arial, Helvetica, sans-serif;"><strong>Step 1 out of 3</strong> [<a href="#" onclick="$.fancybox.close();" style="color:#fff; font-size:14px; font-family:Arial, Helvetica, sans-serif ; font-weight:bold;">Close</a>]</td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td colspan="2"><h1>Sign up for free to comment on stories.</h1></td>
    </tr>
    <tr>
      <td colspan="2"><div id="regShr">
        <div class="d1">Connect to your Facebook or Twitter acount and we'll fill in your registration information below.</div>
        <div class="d2"><a href="javascript:void(0);" id="fbRegButton"><img src="http://img1-cdn.newser.com/images/connect_facebook.png" alt="Connect To Facebook to simplify the registration process" /></a></div>
        <div class="d2"><a id="TwitterButton" title="Connect To Twitter to simplify the registration process"><img src="http://img2-cdn.newser.com/images/connect_twitter.png" alt="Connect To Twitter to simplify the registration process" /></a></div>
        <div style="clear:both;"></div>
      </div></td>
    </tr>
    <tr>
      <td width="196">Username:</td>
      <td width="387"><input name="username" type="text" id="username" class="validate[required]"  tabindex="1" />
        <br />
        <em>Appears on all of your comments</em></td>
    </tr>
    <tr>
      <td>Email Address</td>
      <td><input name="email" type="text" id="email" tabindex="2" />
        <br />
        <em>Invisible to the public</em></td>
    </tr>
    <tr>
      <td>Password:</td>
      <td><input name="password" type="password" id="password" tabindex="3" /></td>
    </tr>
    <tr>
      <td>Confirm Password:</td>
      <td><input name="conpassword" type="password" id="conpassword" tabindex="4" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2"><input id="agree" type="checkbox" name="agree" tabindex="5" />
        I  have read and agreed to the <a href="http://www.newser.com/terms.aspx">terms of use.</a></td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td><a id="continue"  class="button" tabindex="6" href="#"  onclick="jQuery('#regFormFirst').validationEngine('validate'); postClose();">CONTINUE</a></td>
      <td>Already have an account? <a href="javascript:void(0);" onclick="CloseRegister();OpenLogin(0);">Log in here.</a></td>
    </tr>
  </table>

</form>
</body>
我只想当前页面验证。。。发布到数据库并通过fancybox打开下一页。

为什么不在重新加载时使用类似的内容：

$（“#YourFancyBoxID”）.fancybox（）.trigger（'click'）

而不是


$.fancybox.open（{href:'/register2.php'，键入：“ajax'}）
对不起，我对fancybox不太了解…我应该在哪里添加它…记得我把fancybox.open放在了父页面中。

function postClose () {
        dataString = $("#regFormFirst").serialize();
        $.ajax({
                    type: "POST",
                    url: "/includes/reguser.php",
                    data: dataString,
                    success: function(){

                    }
                    });
    $.fancybox.open({ href : '/register2.php', type: 'ajax'});

    }