AJAX form in Codeigniter responds with error when valid [half working]

Question

From further developments, I have a AJAX and CI email form that works perfectly with javascript disabled (using Codeigniter code) and when on using AJAX there are a few bugs.

When there are missing boxes and press submit it pops up with the error mmessage-great, but when filled in correctly and on submit it still posts the error even though its right and the email i still receive in my inbox.This is really bugging me as its something in my AJAX code and i think i am missing something in my controller.

Another question:On the AJAX form it is posting personal error/success messages- is there a way of echoing CI $success and echo validation_errors(); in this so they are the same?

The code is what i have so far:

TO see my controller follow this link: Codeigniter AJAX email validation

VIEW

<h1>Contact</h1>
<div id="contact">
<?php
//This is loaded in the view as it wont be used in the other pages
$this->load->helper('form');

echo form_open('contact/send_email');

//success message if passed validation checks
echo '<div id="success">';
echo $success;
echo '</div>';

 // empty div for error messages (ajax)
echo '<div id="errors">';

// empty div for error messages (php)
if(validation_errors() != ""){
    echo '<h3>Please correct the following errors:</h3>'; 
    echo validation_errors();
}

echo '</div>';

echo form_label('Name: ', 'name');
    $data = array (
        'name' => 'name',
        'id' => 'name',
        'value' => set_value('name')
    );
echo form_input($data);


echo form_label('Email: ', 'email');
    $data = array (
        'name' => 'email',
        'id' => 'email',
        'value' =>set_value('email')
    );
echo form_input($data);


echo form_label('Message: ', 'message');
    $data = array (
        'name' => 'message',
        'id' => 'message',
        'value' =>set_value('message')
    );
echo form_textarea($data);
?>

<br />

<?php
echo form_submit('submit', 'Send');

echo form_close();
?>

AJAX

<script type="text/javascript">
$(function() {
    $('form').submit(function() {

        // get the form values
        var form_data = {
            name: $('#name').val(),
            email: $('#email').val(),
            message: $('#message').val()
        };

        // send the form data to the controller
        $.ajax({
            url: "<?php echo site_url('contact/send_email'); ?>",
            type: "POST",
            data: $(form_data).serialize(),
            success: function(msg) {

            if(msg.validate)
                    {
                    $('form').prepend('<div id ="success">Success</div>');
                    $('#success').fadeOut(5000);
                    }else
                     $('form').prepend('<div id ="errors">Error</div>');
                     $('#errors').fadeOut(5000);
                }
            });
            // prevents from refreshing the page
            return false;   
        });
    });
    </script>

Answer 1

Looks to me like this line (in your javascript)

if(msg.validate)

is looking for an object, where your script isn't actually parsing any JSON or returning any JSON.

What I can only assume would be a good idea here (after looking at your controller too) would be to check if the <div id="errors"> has anything inside it in the response

Then in you javascript you would need to make a few changes

success: function(msg) {
            if(msg.validate)
            {
               $('form').prepend('<div id ="success">Success</div>');
               $('#success').fadeOut(5000);
            }
            else
            {
               $('form').prepend('<div id ="errors">Error</div>');
               $('#errors').fadeOut(5000);
            }
});

will become

success: function(msg) {
            $msg = $(msg);
            // check to see if the div with id="errors" contains a h3 tag
            if($msg.filter('#errors').find('h3').length < 1)
            {
               $('form').prepend('<div id ="success">Success</div>');
               $('#success').fadeOut(5000);
            }
            else
            {
               $('form').prepend('<div id ="errors">Error</div>');
               $('#errors').fadeOut(5000);
            }
});

Note: I've written this off the cuff so I haven't actually tested it but it should point you in the right direction.

Edited to use id selectors and not class selectors (habit of mine)