jQuery not hiding elements
<p>Here's my code, what I'm trying to do is have javascript check a form and then submit it to a PHP script via AJAX that will log the user in.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;RPEMS: Login&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="../main.css"&gt;&lt;/link&gt;
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type='text/javacript'&gt;

$(function()
{
    $('.error').hide();
$('.button').click(function()
{
    $('.error').hide();
    var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    var email = $('input#email').val();
    var pass = $('input#pass').val();
    var err = false;

    if (!email)
    {
        $('label#emErr').show();
        $('input#email').focus();
        err = true;
    }

    if (!filter.test(email))
    {
        $('label#emValErr').show();
        $('input#email').focus();
        err = true;
    }

    if (!pass)
    {
        $('label#passErr').show();
        $('input#pass').focus();
        err = true;
    }

    if (err) return false;

    var dataString = 'email=' + email + '&amp;pass=' + pass;
    $.ajax({
    type: "POST",
    url: "log.php",
    data: dataString,
    success: function(result)
    {
        if (result.success == true) window.location('../');
        else $('p#phpErr).html(result.message).show();
    }});
}
});

    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="header"&gt;
        &lt;img id="logo" src="../img/logo.png"&gt;&lt;/img&gt;
            &lt;ul id="navBar"&gt;
                &lt;li class="navLink"&gt;
                    &lt;a href="/"&gt;Home&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="navLink"&gt;
                    &lt;a href="/about"&gt;About/Contact Us&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="navLink"&gt;
                    &lt;a href="/calendar"&gt;Calendar&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="navLink"&gt;
                    &lt;a href="/login"&gt;Login&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
    &lt;/div&gt;

    &lt;form method='post' action=''&gt;
        &lt;fieldset&gt;
            &lt;label for='email'&gt;Email: &lt;/label&gt;
            &lt;input name='email' id='email' type='text'&gt;&lt;/input&gt;
            &lt;br class='error'&gt;&lt;/br&gt;
            &lt;label for='email' class='error' id='emErr'&gt;This field is required&lt;/label&gt;
            &lt;label for='email' class='error' id='emValErr'&gt;Invalid email adress&lt;/label&gt;
            &lt;br class='error'&gt;&lt;/br&gt;

            &lt;label for='pass'&gt;Password: &lt;/label&gt;
            &lt;input name='pass' id='pass' type='password'&gt;&lt;/input&gt;
            &lt;br&gt;&lt;/br&gt;
            &lt;label for='pass' class='error' id='passErr'&gt;This field is required&lt;/label&gt;
            &lt;br class='error'&gt;&lt;/br&gt;
            &lt;p class='error' id='phpErr'&gt;&lt;/p&gt;

            &lt;input type='submit' name='submit' id='submit_btn' value='Submit'&gt;&lt;/input&gt;
        &lt;/fieldset&gt;
    &lt;/form&gt;
</code></pre>

<p>Sadly when I load the page though, the errors aren't hidden, any idea why?</p>
