Why does my form submit, when ignoring the popup alert

Question

I have a form where no fields can be empty. I popup an alert box when user tries to submit the form with empty fields. but when user clicks on ok in the alert box the form get submitted.

Below is my code:

js:

 function checkIt(f)
  {   
    if (f.elements['username'].value=="" && f.elements['text'].value=="") {      
        alert('Both fields are required');
        return false;   
    } else {
        return true;
    } 
  }

form:

<form method="POST" action="" onSubmit="return checkIt(this)" id="submit">
    <input type="text" name="username" />
    <label>Enter Your Name</label>
    <input type="text" name="text" />
    <label>Enter Your Text</label>

<input type="submit" value="Submit Comment"/>
</form>

Action code:

$('.submit').submit(function(){

          $.ajax({
              url : ....,
              data : $(' form').serialize(),
              type: "POST",
              success : function(){
              }
          })

          return false;
      })

What I am doing wrong ?

Answer 1

if (f.elements['username'].value=="" && f.elements['text'].value=="") {

Because form submission prevents only if BOTH fields are empty. You should use OR(||) instrad of AND(&&)

Answer 2

Here is the code which works for me

 $('.submitComment').submit(function(){
      var username = document.getElementById("username").value;
      var text = document.getElementById("text").value;

      if (username != "" && text != "") {
          $.ajax({
              url : 
              data : $(' form').serialize(),
              type: "POST",
              success : function(){
              }
          })  
      } else {
          alert('Both fields are required');
      }

      return false;
  })