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

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?