JavaScript Validation (Colorbox)-Collection of common programming errors

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:

 

$(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;

    });


  });

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?

1. 
        REGISTER FORM 
   
   
   
   

   Here is jquery code:

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

   Demo: jsfiddle.net/9QkmH/

2. to open colorbox on demand just use this:

   $.colorbox({...});
   

   for e.g.:

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

Originally posted 2013-11-13 09:49:27.