灯箱中的Ajax表单问题

Question

我遇到了Ajax电子邮件表单的问题。我的表单在灯箱调用中。因此，每当我提交表单而不是提交表单时，它都会转到请求的php文件。

$('.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. email@example.com">
						</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>

这是我的代码。 #contact-form-popup 在css中隐藏，当我调用 $（'。lightbox'）。nivoLightbox（）; 时，它会出现。但表单提交不起作用。