HTML中的提交按钮未调用Javascript

Question

For some reason my javascript won't execute when my submit button is pressed. It's supposed to leave an error message beside two textfields for a user's name and email address if they are empty, but it's not and I can't figure out why. Normally, when the two boxes are filled, the submit would go to a php page which sends an email. Any suggestions or help with fixing my javascript problem will be greatly appreciated.

This is my javascript:

//my javascript function
<script type='text/javascript'>
function validate_form()
{
        $('span.error_message').html('');
        var success = true;
        $("#validate_form input").each(function()
        {
            if($(this).val()=="")
            {
                $(this).next().html("* You must complete this field"); // the error message
                success = false;
            }
        });
        return success;
    }
</script>

and my form in html:

<form action=".....whatever....." method="POST" id="validate_form" onsubmit="return validate_form();">
    <ol>
        <li>
            <span id="question">___ is your name? My name is Marie.</span>
            <input type="text" name="q1" id="q1" />
        </li>
        <li>
            <span id="question">___ are you from? I'm from Paris, France.</span>
            <input type="text" name="q2" id="q2" />
        </li>
        <li>
            <span id="question">Dave: ___ you like football</span>
            <p>
                <input type="radio" name="q6" value="1" id="q6_1" />
                <label for="q6_1">Are</label>

                <input type="radio" name="q6" value="2" id="q6_2" />
                <label for="q6_2">Do</label>

                <input type="radio" name="q6" value="3" id="q6_3" />
                <label for="q6_3">Does</label>

                <input type="radio" name="q6" value="4" id="q6_4" />
                <label for="q6_4">Is</label>
            </p>
        </li>
    <div id="username">
        <p>
            Before we begin, please enter your name and email:
            <br />
            <label for="user_name">Name: </label><input type="text" name="user_name" id="user_name" />
                <span class="error_message" style="color:#FF0000"></span>
            <br />
            <label for="user_email">Email: </label><input type="text" name="user_email" id="user_email" />
                <span class="error_message" style="color:#FF0000"></span>
        </p>
    </div>

        <p style="width: 242px; margin: auto;">
            &nbsp;
            <input type="submit" name="submit" value="Submit your answers" id="but" />
        </p>
</form>

Edit: Fixed the problem with the javascript being called, but now the submit button isn't working even with the two textfields being filled.

Answer 1

$("#validate_form input") - I don't see validate_form anywhere; you need to add it or just use: $("input")

Answer 2

Firebug for firefox would help you debug these types of jscript issues. You can also use the Error Console in Firefox if you dont want to install firebug.