Form validation via jQuery.post with .val() returning 'null' error
<script type="text/javascript" src="inc/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery("#login_form").submit(function() {
        jQuery("#msgbox").removeClass()
                         .addClass('messagebox')
                         .text('verifying')
                         .fadeIn(1000);

        jQuery.post("inc/ajax_login.php", {
            user_name: $('#username').val(),
            password: $('#password').val()
        }, function(data) {
            if (data == 'yes') { /* ... */
            }
            else { /* ... */
            }
        });
        return false;
    });
});​
</script>

<form action="" id="login_form" method="POST">
  <input type="text"     name="username" id="username" value="username" />
  <input type="password" name="password" id="password" value="password" /><br />
  <input type="hidden"   name="homeDir"  id="homeDir"  value=""         /> <span id="msgbox"></span> <br />
  <input type="submit"   name="Submit"    id="submit"    value="ENTER" class="submit"/>
</form>

<script>

jQuery.noConflict();

(function($) {
    $("#login_form").submit(function()
    {
        $("#msgbox").removeClass().addClass('messagebox').text('verifying').fadeIn(1000);

        $.post("inc/ajax_login.php", {
            user_name: $('#username').val(),
            password: $('#password').val()
        }, function(data) {
          if(data=='yes') {/* ... */}
          else {/* ... */}
        });

        return false;
    });
})(jQuery);

</script>