jquery验证功能与rails 3.2.1无法正常工作

时间:2012-03-30 09:53:01

标签: jquery ruby-on-rails-3 jquery-validate validation

我正在使用Rails -3.2.1。在我的一个表单中,我正在使用jquery验证。我的表格在下面

new_account.html.erb

<%= form_for(@account, :url =>{:action=> "create_account"}) do |f| %>

<table width="80%" border="1" align="center" cellpadding="5" cellspacing="5">
        <tr>
            <td width="30%">
                <%= f.label :Account_Name, :class => :style1_bold %>
            </td>
            <td>
                <%= f.text_field :account_name, :class => "input_border required ONLY_ALPHABET" %>
            </td>
        </tr>
<tr>
            <td>
                &nbsp;
            </td>
            <td>
            </div>
            <div class="actions">
                <%=f.submit "Add Account" %>
                <%= link_to "Cancel", home_path, :class=>"style2_link" %>
            </div>
        </td>
        </tr>
    </table>
    <% end %>

在application.js

//= require jquery
//= require jquery_ujs
// require_tree .
//= require_directory .

    jQuery.noConflict();
    jQuery(document).ready(function(){



        /////////////////////////////////////////////
        //// Validatior for only alphabet
        /////////////////////////////////////////////
        jQuery.validator.addMethod("ONLY_ALPHABET",function(value,element){
            return this.optional(element) || /^[a-zA-Z ]+$/.test(value);
        },"Only Alphabet is allowed");

        /////////////////////////////////////////////
        //// Validation for Create Account
        /////////////////////////////////////////////
        jQuery("#new_account").validate(    
        {    
                rules: {
                account_account_name: {
                    required: true,
                ONLY_ALPHABET: true,
                    maxlength: 30
                }
            },    
            messages: {
                account_account_name: {
                    required: "Please fill category",
                    ONLY_ALPHABET: "Only Alphabet is allowed",                    
                    maxlength: "Not more than 30 characters"
                }
            }
        });

    });

表单提交。它不显示我的消息,而是显示jquery默认消息。

我包含此文件 jquery.validate.min.js

1 个答案:

答案 0 :(得分:0)

以下是我生成的html

<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/account.js?body=1" type="text/javascript"></script> 
<script src="/assets/account_types.js?body=1" type="text/javascript"></script> 
<script src="/assets/ad_networks.js?body=1" type="text/javascript"></script> 
<script src="/assets/admins.js?body=1" type="text/javascript"></script> 
<script src="/assets/budget_types.js?body=1" type="text/javascript"></script> 
<script src="/assets/campaigns.js?body=1" type="text/javascript"></script> 
<script src="/assets/countries.js?body=1" type="text/javascript"></script> 
<script src="/assets/generals.js?body=1" type="text/javascript"></script> 
<script src="/assets/jigserv_campaign_approved_statuses.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.validate.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/pages.js?body=1" type="text/javascript"></script> 
<script src="/assets/registrations.js?body=1" type="text/javascript"></script> 
<script src="/assets/roles.js?body=1" type="text/javascript"></script> 
<script src="/assets/sessions.js?body=1" type="text/javascript"></script> 
<script src="/assets/states.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script> 

<meta content="authenticity_token" name="csrf-param" /> 
<meta content="hoNuxIIBstb8xaBSHgQAHw3uuwLTN/Jn692S6jFnsRo=" name="csrf-token" /> 
    </head> 
    <body background="/assets/site8/newbg.jpg"> 

<form accept-charset="UTF-8" action="/create_account" class="new_account" id="new_account" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="hoNuxIIBstb8xaBSHgQAHw3uuwLTN/Jn692S6jFnsRo=" /></div> 

    <table width="100%" border="0" align="center" cellpadding="5" cellspacing="5"> 
        <tr> 
            <td align="right"> 
                        <a href="/home" class="logout">Account List</a> |

            <a href="/campaign_list" class="logout">Campaign List</a>       

            </td> 
        </tr> 
    </table> 
    <table width="80%" border="0" align="center" cellpadding="5" cellspacing="5"> 
        <tr> 
            <td width="30%"> 
                <label class="style1_bold" for="account_Account_Name">Account name</label> 
                <label class="star"> 
                    *
                </label> 
            </td> 
            <td> 
                <input class="input_border required ONLY_ALPHABET" id="account_account_name" maxlength="15" name="account[account_name]" size="15" type="text" /> 
            </td> 
        </tr> 
<tr> 
            <td> 
                &nbsp;
            </td> 
            <td> 
                <input name="commit" type="submit" value="Add Account" /> 
                <a href="/home" class="style2_link">Cancel</a> 
        </td> 
        </tr> 
    </table> 
</form> 

 </body> 
</html>