JavaScript Validation (Colorbox)

Question

In my page I have three fields that is required to fill in. If they are filled in a small pop up opens for registration. However, right now I have it in JavaScript. If one or more filed is not filled in, it will give a message one after other. For example, field 1,2,3 are not filled in. It will tell in a message box, please fill in field 1, second pop up please fill in 2 field, and please fill in 3 field. And right after it opens the registration pop up. I want to prevent that, UNLESS all the fields are filled in. It SHOULD NOT open the pop up without fields being completed.

Here's the code:

 <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>

I can't get this pop up

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

to work inside the click function:

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

I tried right after I close the message for third filed put this:

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

But I get the following error:

Uncaught TypeError: Object # has no method 'colorbox'

Any help on how I can fix this?

Answer 1

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

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

Here is jquery code:

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

Demo: jsfiddle.net/9QkmH/