JavaScript验证（Colorbox）

在我的页面中，我需要填写三个字段。如果填写了，将打开一个小弹出窗口进行注册。然而，现在我有了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").click(function()

在我关闭第三个文件的消息后，我立即尝试了以下内容：

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

但我得到了以下错误：

未捕获的TypeError:对象#没有方法“colorbox”

有人能帮我解决这个问题吗

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

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

---

演示：

要按需打开配色箱，只需使用以下选项：

$.colorbox({...});

例如：

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

---

但我需要先检查3个字段。如何将此代码集成到现有javascript中？@user1426542请看这个示例：当我集成到代码中时，会出现语法错误$（“#btn”）。单击（function（）灰显。@user1426542这是带有

id=“btn”

的按钮，发布的代码是正常的，您可以添加html murkup，我会检查您的代码。@user1426542您的按钮是用php生成的？看看这个示例：我不想按需打开。我想在字段完成后打开。

$.colorbox({...});

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