Jquery Validated Form Not Submiting on 'return true'

Question

Wow, my first Stackoverflow post, I've been watching this site for ages .. anyway, so Ive got a form, that I'm using Jquery to do some simple validation, and for some reason, even though the 'return true' is coming through, I tested it by putting an alert just before it. Heres my jquery, which isnt coming up with any errors:

            var captcha_def = 'Please copy the text';

        $('input[type="submit"]').click( function(x){
            x.preventDefault();
            var validated;

            $('.validate').each(function(){
                var content = $(this).val();
                if ( content == '' )
                {
                    $(this).addClass('error');
                    validated = 'false';
                }
                else
                {$(this).removeClass('error');}
            });


            $('#conf_email').each( function(){  //Just to check to make sure their is a Email Confirmation

                var email = $("#email").val();
                var conf_email = $('#conf_email').val();
                if (email != conf_email)
                {
                    $('#email, #conf_email').addClass('error');
                    validated = 'false';
                }
                else
                {
                    $('#email, #conf_email').removeClass('error');
                }
            });



                var captcha = $('#captcha_input').val();
                if (captcha == captcha_def)
                {
                    $('#captcha_input').addClass('error');
                    validated = 'false';
                }
            alert(validated);

            if (validated === 'false') 
            {
                return false;
                } 
            else
            {   
                return true;
            }

        });

and heres my html (which validates):

<form id='freeform' name='a' method="post" action="index.php"  >


    <div id="contact_form">
        <h2><span class="small-caps">Send</span> US AN <span class="small-caps">Email</span></h2>

        <label for="name_input" class="text">*Your Name:</label><input type="text" name="name" class="text validate" id="name_input" /><br />
        <label for="email_input" class="text">*Email:</label><input type="text" name="email" class="text validate email" id="email_input" /><br />
        <label for="ta_message" class="textarea">Your Message:</label><br />
        <textarea id="ta_message" name="message"></textarea><br />

        <label for="captcha_input" class="text"><img src="/images/captchas" width="140" height="30" style="border:0;" alt=" " /></label><input type="text" name="captcha" class="captcha text validate" id="captcha_input" /><br />

        <input type="submit" id="submit" value="Submit"> 
    </div>

I've been banging my head over this, and cant figure out what it is, and with a deadline looming, I'm trying to figure out what I messed up. Thanks you so much for any help!

Answer 1

The x.preventDefault(); line prevent the default behaviour of the control (in this case, the submit) from happening. Remove that line or move if right before the return false and it should work.

Answer 2

Why are you calling x.preventDefault() at the beginning without doing any validation at all? What about prevent the default behavior only when your validation fails?