jQuery Validator Plugin on Ruby on Rails 3?

Currently I would like to know why the jquery validator doesn't work with the following code on ruby on rails? I noticed it works with text_field tag but not with f.text_field Does anyone know how to make it work with f.text_field? Thanks

Document ready function

    $("#user_signup_form").validate({
    rules: {
    user_username:{
    required: true,
    minlength: 3
    },
    user_email:{
    required: true,
    email: true
    },
    user_password:{
    required: true,
    minlength: 7
    },
    user_password_confirmation:{
    required: true,
    minlength: 7,
    equalTo: "#user_password"
    }
    },
    messages: {
    user_username:{
    required: "Required",
    minlength: "Min Length is 3 characters"
    },
    user_email:{
    required: "Required",
    email: "A valid email address is required"
    },
    user_password:{
    required: "Required",
    minlength: "Min Length is 7 characters"
    },
    user_password_confirmation:{
    required: "Required",
    minlength: "Min Length is 7 characters",
    equalTo: "New Password Doesn't Match"
    }
    }
    });


    <%= form_for(:user, url: signup_path, :html =>{:id => "user_signup_form"}) do |f| %>
    <% if @user.errors.any? %>
    <div id="error_explanation">
    <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
    <li><%= msg %></li>
    <% end %>
    </ul>
    </div>
    <% end %>

    <div class="field">
    <%= f.label :username, "Select a username for tingle" %><br />
    <%= f.text_field :username %>
    </div>

    <div class="field">
    <%= f.label :email %><br />
    <%= f.text_field :email %>
    </div>

    <div class="field">
    <%= f.label :password, "Select a password for tingle" %><br />
    <%= f.password_field :password %>
    </div>

    <div class="field">
    <%= f.label :password_con开发者_如何学Cfirmation, "Confirm password" %><br />
    <%= f.password_field :password_confirmation %>
    </div>

    <div class="actions">
    <%= f.submit defined?(@button_label)? @button_label : "Signup"   %>
    </div>
    <% end %>

You need to do validation on field's name instead of id. Just like what i have done below. first includes required jquery libraries.

<%= javascript_include_tag "jquery-1.6.2.min.js" %>
<%= javascript_include_tag "jquery.validate.js" %>


<%= form_for(:user, url => signup_path, :html =>{:id => "user_signup_form"}) do |f| %>
    <% if @user.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
          <ul>
            <% @user.errors.full_messages.each do |msg| %>
                <li><%= msg %></li>
            <% end %>
          </ul>
        </div>
    <% end %>

    <div class="field">
      <%= f.label :username, "Select a username for tingle" %>
      <br/>
      <%= f.text_field :username %>
    </div>

    <div class="field">
      <%= f.label :email %>
      <br/>
      <%= f.text_field :email %>
    </div>

    <div class="field">
      <%= f.label :password, "Select a password for tingle" %>
      <br/>
      <%= f.password_field :password %>
    </div>

    <div class="field">
      <%= f.label :password_confirmation, "Confirm password" %>
      <br/>
      <%= f.password_field :password_confirmation %>
    </div>

    <div class="actions">
      <%= f.submit defined?(@button_label) ? @button_label : "Signup" %>
    </div>
<% end %>



<script type="text/javascript">
    $(document).ready(function() {
        $("#user_signup_form").validate({
            rules: {
                "user[username]":{
                    required: true,
                    minlength: 3
                },
                "user[email]":{
                    required: true,
                    email: true
                },
                "user[password]":{
                    required: true,
                    minlength: 7
                },
                "user[password_confirmation]":{
                    required: true,
                    minlength: 7,
                    equalTo: "#user_password"
                }
            },
            messages: {
                "user[username]":{
                    required: "Required",
                    minlength: "Min Length is 3 characters"
                },
                "user[email]":{
                    required: "Required",
                    email: "A valid email address is required"
                },
                "user[password]":{
                    required: "Required",
                    minlength: "Min Length is 7 characters"
                },
                "user[password_confirmation]":{
                    required: "Required",
                    minlength: "Min Length is 7 characters",
                    equalTo: "New Password Doesn't Match"
                }
            }
        });
    });
</script>