Form sends message twice

Question

I'm adapting a free form and it works fine, but it sends email twice and writes message after done twice. I was trying to replace button and input tags in form by one input tag with "button" type but it cashed. Also the problem is that every click run the script and sending next message, so if I click a few times in one moment it will send a lot of emails. Should I prohibit this in php or js?

<?php if(isset($emailSent) && $emailSent == true) { ?>
                <p class="info">Your email was sent</p>
            <?php } else { ?>

                <div class="desc">
                    <h2>Contact Us</h2>
                </div>

                <div id="contact-form">
                    <?php if(isset($hasError) || isset($captchaError) ) { ?>
                        <p class="alert">Error submitting the form</p>
                    <?php } ?>

                    <form id="contact-us" action="contact.php" method="post">
                        <div class="formblock">
                            <label class="screen-reader-text">Name</label>
                            <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="txt requiredField" placeholder="Name:" />
                            <?php if($nameError != '') { ?>
                                <br /><span class="error"><?php echo $nameError;?></span> 
                            <?php } ?>
                        </div>

                        <div class="formblock">
                            <label class="screen-reader-text">Email</label>
                            <input type="email" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="txt requiredField email" placeholder="Email:" />
                            <?php if($emailError != '') { ?>
                                <br /><span class="error"><?php echo $emailError;?></span>
                            <?php } ?>
                        </div>

                        <div class="formblock">
                            <label class="screen-reader-text">Message</label>
                             <textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                            <?php if($commentError != '') { ?>
                                <br /><span class="error"><?php echo $commentError;?></span> 
                            <?php } ?>
                        </div>
                        <button name="submit" type="submit" class="subbutton">Send us Mail!</button>
                            <input type="hidden" name="submitted" id="submitted" value="true" />
                    </form>         
                </div>

            <?php } ?>
        </div>
    </div><!-- End #contact -->

<script type="text/javascript">
    <!--//--><![CDATA[//><!--
    $(document).ready(function() {
        $('form#contact-us').submit(function() {
            $('form#contact-us .error').remove();
            var hasError = false;
            $('.requiredField').each(function() {
                if($.trim($(this).val()) == '') {
                    var labelText = $(this).prev('label').text();
                    $(this).parent().append('<span class="error">Your forgot to enter your '+labelText+'.</span>');
                    $(this).addClass('inputError');
                    hasError = true;
                } else if($(this).hasClass('email')) {
                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                    if(!emailReg.test($.trim($(this).val()))) {
                        var labelText = $(this).prev('label').text();
                        $(this).parent().append('<span class="error">Sorry! You\'ve entered an invalid '+labelText+'.</span>');
                        $(this).addClass('inputError');
                        hasError = true;
                    }
                }
            });
            if(!hasError) {
                var formInput = $(this).serialize();
                $.post($(this).attr('action'),formInput, function(data){
                    $('form#contact-us').slideUp("fast", function() {                  
                        $(this).before('<p class="tick"><strong>Thanks!</strong> Your email has been delivered. Huzzah!</p>');
                    });
                });
            }

            return false;   
        });
    });
    //-->!]]>
</script>

<?php 
error_reporting(E_ALL ^ E_NOTICE); // hide all basic notices from PHP

//If the form is submitted
if(isset($_POST['submitted'])) {

    // require a name from user
    if(trim($_POST['contactName']) === '') {
        $nameError =  'Forgot your name!'; 
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    // need valid email
    if(trim($_POST['email']) === '')  {
        $emailError = 'Forgot to enter in your e-mail address.';
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = 'You entered an invalid email address.';
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    // we need at least some content
    if(trim($_POST['comments']) === '') {
        $commentError = 'You forgot to enter a message!';
        $hasError = true;
    } else {
        if(function_exists('stripslashes')) {
            $comments = stripslashes(trim($_POST['comments']));
        } else {
            $comments = trim($_POST['comments']);
        }
    }

    // upon no failure errors let's email now!
    if(!isset($hasError)) {

        $emailTo = 'example@example.com';
        $subject = 'Submitted message from '.$name;
        $sendCopy = trim($_POST['sendCopy']);
        $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
        $headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        mail($emailTo, $subject, $body, $headers);
        mail($email, $subject, $body, $headers);

        // set our boolean completion value to TRUE
        $emailSent = true;
    }
}
?>

Answer 1

The submit handler function receives a single argument called event . When you detect a validation error, you need to call event.preventDefault() so the form does not submit.

$(document).ready(function() {
    $('form#contact-us').submit(function(event) {
        // you detect a validation error...
        hasError = true;

        // more stuff on submit...

        // at the end of the function
        if (hasError) {
            event.preventDefault();
        }
    });