JavaScript驗證（Colorbox）

Question

在我的頁面中，我有三個需要填寫的字段。如果他們填寫了一個小彈出窗口打開註冊。不過，現在我已經使用JavaScript了。如果一個或多個字段沒有填寫，它會一個接一個地發送消息。例如，字段1,2,3未填寫。它會在消息框中顯示，請填寫字段1，然後彈出請填寫2字段，並填寫3字段。當它打開註冊彈出。我想要防止這種情況發生，除非所有的字段都被填入。如果沒有字段完成，它不應該打開彈出窗口。

下面的代碼：

<script type="text/javascript" id ="popup"> 

$(document).ready(function() { 


$("#lightboxRegister").colorbox({inline:true, width:"50%"}); 

    $("#lightboxRegister").click(function() { 
     if(document.getElementById("title-vis").value ==""){ 
      alert("You need to enter a book title."); 
      self.close(); 
     } 
     if(document.getElementById("abstract-vis").value ==""){ 
      alert("You need to enter a book abstract."); 
      self.close(); 
     } 
     if(document.getElementById("writtenby-vis").value ==""){ 
      alert("You need to enter a pen name."); 
      self.close(); 
     } 

     document.getElementById("title").value = document.getElementById("title-vis").value; 
     document.getElementById("abstract").value = document.getElementById("abstract-vis").value; 
     document.getElementById("writtenby").value = document.getElementById("writtenby-vis").value; 

    }); 


    }); 
</script> 

我不能得到這個彈出

$("#lightboxRegister").colorbox({inline:true, width:"50%"}); 

的點擊功能在裏面工作：

$("#lightboxRegister").click(function() 

我想我關閉之後第三個字段的消息是這樣的：

$(this).colorbox({inline:true, width:"50%"}); 

，但我得到了以下錯誤：

Uncaught TypeError: Object # has no method 'colorbox'

我如何能解決這個問題的任何幫助嗎？

Answer 1

<div style="display:none;"> 
    <div id="lightboxRegister"> REGISTER FORM </div> 
</div> 

<input type="button" id="btn" value="open inline?" /> 

這裏是jQuery代碼：

$('#btn').click(function(){ 
    $.colorbox({inline:true, width:"50%", href: '#lightboxRegister'}); 
}); 

演示：jsfiddle.net/9QkmH/

Answer 2

按需打開顏色框只是用這樣的：

$.colorbox({...}); 

用於例如爲：

$('.myButton').click(function() { 
    alert('ok, lets open colorbox now!'); 
    $.colorbox({href: 'myUrl.html', width: 500}); 
});