Question

trying to get this contact form to work properly, the form slides out from a hidden div, which seem to work fine, but close upon submiting the form, which is what i want but it closes even if the form fields are empty. if fields are filed it and submit it closes before get confirmation.

demo here http://g-thos.com

<section id="" class="contact contact-wrap">

<section class="wrap social-info intro contact about">


  <section role="contact-form" id="contact-form">
    <?php
if (isset($_POST['submit'])) {
$error = "";

if (!empty($_POST['name'])) {
$name = $_POST['name'];
} else {
$error .= "You didn't type in your name. <br />";
}

if (!empty($_POST['email'])) {
$email = $_POST['email'];
  if (!preg_match("/^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $email)){ 
  $error .= "The e-mail address you entered is not valid. <br/>";
  }
} else {
$error .= "You didn't type in an e-mail address. <br />";
}

if (!empty($_POST['message'])) {
$message = $_POST['message'];
} else {
$error .= "You didn't type in a message. <br />";
}

if(($_POST['code']) == $_SESSION['code']) { 
$code = $_POST['code'];
} else { 
$error .= "The captcha code you entered does not match. Please try again. <br />";    
}

if (empty($error)) {
$from = 'From: ' . $name . ' <' . $email . '>';
$to = "myemail@email";
$subject = "New contact form message";
$content = $name . " has sent you a message: \n" . $message;
$success = "<p>Thank you! Your message has been sent!</p>";
mail($to,$subject,$content,$from);
}
}
?>
  <h2>Getin Touch</h2>
  <div id="note"><?php
  if (!empty($error)) {
  echo '<p class="error"><strong>Your message was NOT sent<br/> The following error(s) returned:</strong><br/>' . $error . '</p>';
  } elseif (!empty($success)) {
  echo $success;
  }
?></div><!--end note-->
      <form method="post" id="contact">
        <div class="input-wrap">
          <div class="input">
            <input type="text" placeholder="name" name="name" value="<?php if ($_POST['name']) { echo $_POST['name']; } ?>" class="required" id="name" />
          </div>
          <div class="input">
            <input type="text" placeholder="email" name="email" id="email" value="<?php if ($_POST['email']) { echo $_POST['email']; } ?>" class="required email" id="email" />
          </div>
          <div class="input">
            <input type="text" placeholder="subject" name="subject" id="subject" value="<?php if ($_POST['subject']) { echo $_POST['subject']; } ?>" class="required" id="subject" />
          </div>
          <div class="input">
            <textarea rows="8" placeholder="message" name="message" id="message" style="height: 50px;"><?php if ($_POST['message']) { echo $_POST['message']; } ?></textarea>
          </div>
          <img src="<?php bloginfo('template_url'); ?>/includes/js/captcha.php"> <input type="text" placeholder="code" name="code"></p>
        </div>
        <input type="submit" value="Send Message" name="submit" id="submitButton" title="Click here to submit your message!" />
      </form>
  </section>
  <div class="clear"></div>

</section>
</section>

$(document).ready(function(){

//animation for same page links #
$('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
        if ($(this.hash).length) {
            $(this).click(function(event) {
                var targetOffset = $(this.hash).offset().top;
                var target = this.hash;
                event.preventDefault();            
                $('html, body').animate({scrollTop: targetOffset}, 500);
                return false;
            });
        }
    }
});


$('#nav li a.contact, #content a#contact-link').click(function() {

    $(this).toggleClass('selected');

    $('.contact-wrap').slideToggle();

    if(contentStatus == 'visible') {

        $('#content, section.featured').fadeTo('normal', 0.2);

        contentStatus = 'hidden';

    } else {

        $('#content, section.featured').fadeTo('normal', 1);

        contentStatus = 'visible';

    }

    return false;

});

$('#content, footer').click(function() {

    $('#nav li a.contact').removeClass('selected');
    $('.contact-form').slideUp();
    $('#content, section.featured').fadeTo('normal', 1);
    contentStatus = 'visible';

});

});

Answer 1

Front end validation would be best, something like (if you dont feel like pulling in a full featured validator like elclanrs suggested):

$('form').submit(function(e) {
  if ($('textarea[name="name"]', this).val() == '') {
    e.preventDefault();
    errorMessage("You didn't type in your name. <br />");
  }

  // ... repeat for the rest of your fields
});

function errorMessage(error) {
  $('#note').html('<p class="error"><strong>Your message was NOT sent<br/> The following error(s) returned:</strong><br/>' + error + '</p>');
}

Or you could edit your php to show the form by default on page load if there are errors.

if (!empty($error)) {
  // show contact form
}