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}); 
});