灯箱中的Ajax表单问题

Question

I have a problem with Ajax email form. My form is inside of a lightbox call. So whenever I submit the form instead of submitting the form it goes to the requested php file.

$('.lightbox').nivoLightbox();



$('#contact-form').on('submit', function(e) {
   e.preventDefault();
   var success_msg = $(this).find('.success-msg'),
       error_msg = $(this).find('.error-msg'),
       data = $(this).serialize();

   if (validateEmail( $(this).find('input[name="email"]').val() )) {
      $.ajax({
         type: "POST",
         url: $(this).attr('action'),
         data: data,
         success: function() {
            success_msg.fadeIn(1000);
            error_msg.fadeOut(500);
         }
      });
   } else {
      error_msg.fadeIn(1000);
      success_msg.fadeOut(500);
   }

return false;
});

<p class="contact-help">Need any help?  <a href="#contact-form-popup" class="lightbox" data-lightbox-type="inline">Contact us now</a></p>


<!-- =========================
     CONTACT US  
============================== -->
<div class="contact-form-popup" id="contact-form-popup">
    <h2 class="heading-text text-center">Get in Touch</h2>
    <form action="php/sendmail.php" id="contact-form">
        <div class="">
            <table class="table table-bordered table-form">
                <tbody>
                    <tr>
                        <td class="col-md-6">
                            <label for="contact-name" class="text-uppercase">Enter Your Name</label>
                            <input type="text" class="form-control" id="contact-name" name="name" placeholder="e.g. Jogn Doe">
                        </td>
                        <td class="col-md-6">
                            <label for="contact-email" class="text-uppercase">Your Email</label>
                            <input type="email" id="contact-email" name="email" class="form-control" placeholder="e.g. [e-mail]">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="contact-tel" class="text-uppercase">Your Number</label>
                            <input type="tel" id="contact-tel" name="tel" class="form-control" placeholder="e.g. 000 1234 55478">
                        </td>
                        <td>
                            <label for="contact-sub" class="text-uppercase">Subject</label>
                            <input type="text" id="contact-sub" name="subject" class="form-control" placeholder="e.g. Help / Subject">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <label for="contact-msg" class="text-uppercase">Your Name</label>
                            <textarea name="message" id="contact-msg" class="form-control" cols="30" rows="4" placeholder="Type your message.."></textarea>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="text-center">
            <button type="submit" class="btn btn-base btn-lg"><span>Get in Touch</span></button>
        </div>

        <div class="result">
            <p class="success-msg"><img src="icons/check.svg" class="icon inject-svg icon-xs" alt=""> Thanks! Your message has been sent.</p>
            <p class="error-msg"><img src="icons/close-circle.svg" class="icon inject-svg icon-xs" alt=""> Sorry, Something went wrong!</p>
        </div>
    </form>
</div>

Here's my code. #contact-form-popup is hidden from css, and when I call $('.lightbox').nivoLightbox(); it appears. But form submission do not work.

</div>