How to open a jQuery Facebox after validation?

I want to open a facebox modal after some javascript validation. I am using this code:

<script type="text/javascript" src="facebox.js"></sc开发者_JS百科ript>

Script:

function validatePage()
{
  if(document.getElementById('username').value == '')
  {
        alert('Please enter Username');
        return false;
  }

  //My Code should go here
}

Markup:

<a href="pagename.php" rel="facebox" onclick="javascript:validatePage()">Click Me</a>

For some reason the facebox modal does not open...instread the page is opening in a new window.

Any suggestion will be highly appreciated.

Thanks in advance

Is your onclick overriding the Facebox functionality? I don't know if it would, but that's a thought. Have you tried manually triggering the function instead?

function validatePage(e)
{
  if(document.getElementById('username').value == '')
  {
      alert('Please enter Username');
  } else {
      $.facebox({ajax: $(e).attr("href")});
  }
  return false;
}

I just passed the element to the function, to make that extend to other things. You'd just say "javascript:validatePage(this)" in your onclick.