從shadowbox裏面進行表單驗證的方法是什麼？

Question

好吧我有一個窗體裏面的shadowbox，這個東西只是不驗證......我試過了一百萬種不同的方式。它也生活在一個WordPress的主題，我不認爲它是打破它。 Jquery被加載到標題中。

形式粘貼到一個要點：http://gist.github.com/578270

任何想法？非常感謝，感覺就像我把頭撞到了牆上。

Answer 1

訣竅是使用onFinish回調函數來觸發對Shadowbox內部表單的驗證。如果您像我一樣爲您的表單使用ID，則shadowbox實際上會創建表單的副本，因此您需要將目標定位到shadowbox本身內。我用＃sb-player來做到這一點。

HTML鏈接太極拳

<a href="#newsletter-signup-wrapper" class="newsletter-signup UniversLTStd-Cn">Newsletter Sign-up</a> 

的JavaScript/jQuery的

$('a.newsletter-signup').click(function(){ 
    Shadowbox.open({ 
     width: 562, 
     height: 395, 
     player: 'inline', 
     content: this.href, 
     options: { 
      onFinish: function(){ 
       $('#sb-player #newsletter-signup-form').validate(); 
      } 
     } 
    }); 
    return false; 
}); 

HTML表單（隱藏在頁腳）

<div id="newsletter-signup-wrapper"> 
    <div id="newsletter-signup"> 
     <form action="" id="newsletter-signup-form" target="_parent" method="POST"> 
      <div class="gform_body"> 
       <ul class="gform_fields"> 
        <li class="gfield"> 
         <label class="gfield_label" for="first_name">First Name <span class="gfield_required">*</span></label> 
         <div class="ginput_container"> 
          <input class="medium required" id="first_name" maxlength="40" name="first_name" size="20" type="text" /> 
         </div> 
        </li> 
        <li class="gfield"> 
         <label class="gfield_label" for="last_name">Last Name <span class="gfield_required">*</span></label> 
         <div class="ginput_container"> 
          <input class="medium required" id="last_name" maxlength="80" name="last_name" size="20" type="text" /> 
         </div> 
        </li> 
        <li class="gfield"> 
         <label class="gfield_label" for="email">Email <span class="gfield_required">*</span></label> 
         <div class="ginput_container"> 
          <input class="medium required" id="email" maxlength="80" name="email" size="20" type="text" /> 
         </div> 
        </li> 
        <li class="gfield"> 
         <label class="gfield_label" for="company">Company <span class="gfield_required">*</span></label> 
         <div class="ginput_container"> 
          <input class="medium required" id="company" maxlength="40" name="company" size="20" type="text" /> 
         </div> 
        </li> 
       </ul> 
      </div> 
      <div class="gform_footer"> 
       <input class="button" type="submit" name="submit" value="Sign-up!"> 
      </div> 
     </form> 
    </div> 
</div><!--// end #newsletter-signup-wrapper --> 

我希望這會有所幫助，如果需要，我很樂意詳細解釋。