如何让 jQuery-validate 与 Rails 3 一起使用?
我的Rails表单代码如下:
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<%= f.text_field :f_name, :value => "First Name", :class => "clearField curved" %><br />
<%= f.text_field :l_name, :value => "Last Name", :class => "clearField curved" %><br />
<%= f.text_field :username, :value => "Username", :class => "clearField curved" %><br />
<%= f.password_field :password, :value => "Password", :class => "clearField curved" %><br />
<%= f.password_field :password_confirmation, :value => "Password", :class => "clearField curved" %><br />
<%= f.text_field :email, :value => "Email Address", :class => "clearField curved" %><br />
<div id="login_buttons">
<%= f.submit "Sign in", :id => "login", :value => "Submit", :class => "curved" %>
<%= f.submit "Sign in", :id => "register", :value => "Register", :class => "curved" %>
<%= f.submit "Send Reset Instructions", :id => "pass-reset", :value => "Send Reset Instructions", :class => "curved"%>
<a href="#" id="forgot-pw">Forgot pass?</a>
</div>
<% end %>
第一次加载页面时,用户只看到用户名和用户名。密码字段。一旦他们按下“注册”,他们就会看到其他字段。所以我想做的是对这两个状态进行表单验证。登录状态(仅包含用户名和密码)和注册状态(包含所有字段)。
生成的 HTML 输出如下:
<form accept-charset="UTF-8" action="/users/login" class="user_new" id="user_new" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="5B04HFtyauEPUigmXrIhi2jYvHJv47gvIgUbx64QQ0E=" /></div>
<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br />
<input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br />
<input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br />
<input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br />
<div id="login_buttons">
<input class="curved" id="login" name="commit" type="submit" value="Submit" />
<input class="curved" id="register" name="commit" type="submit" value="Register" />
<input class="curved" id="pass-reset" name="commit" type="submit" value="Send Reset Instructions" />
<a href="#" id="forgot-pw">Forgot pass?</a>
</div>
我尝试了以下方法,但没有成功:
$('#user_new').validate({
debug: true,
rules: {
user_username: "required",
user_email: {
required: true,
email: true
}
},
messages: {
user_username: "Please specify your name",
user_email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of [email protected]"
}
}
});
所以希望得到有关如何进行此操作的任何建议。
Edit1:有什么想法或可能的解决方案吗?
My Rails form code is as follows:
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<%= f.text_field :f_name, :value => "First Name", :class => "clearField curved" %><br />
<%= f.text_field :l_name, :value => "Last Name", :class => "clearField curved" %><br />
<%= f.text_field :username, :value => "Username", :class => "clearField curved" %><br />
<%= f.password_field :password, :value => "Password", :class => "clearField curved" %><br />
<%= f.password_field :password_confirmation, :value => "Password", :class => "clearField curved" %><br />
<%= f.text_field :email, :value => "Email Address", :class => "clearField curved" %><br />
<div id="login_buttons">
<%= f.submit "Sign in", :id => "login", :value => "Submit", :class => "curved" %>
<%= f.submit "Sign in", :id => "register", :value => "Register", :class => "curved" %>
<%= f.submit "Send Reset Instructions", :id => "pass-reset", :value => "Send Reset Instructions", :class => "curved"%>
<a href="#" id="forgot-pw">Forgot pass?</a>
</div>
<% end %>
What happens is when the page is loaded the first time, the user only sees the username & password field. Once they press 'Register' they then see the other fields. So what I would like to do is have form validation on both states. The login state (with just the username & password) and the registration state (with all the fields).
The HTML output produced is as follows:
<form accept-charset="UTF-8" action="/users/login" class="user_new" id="user_new" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="5B04HFtyauEPUigmXrIhi2jYvHJv47gvIgUbx64QQ0E=" /></div>
<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br />
<input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br />
<input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br />
<input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br />
<div id="login_buttons">
<input class="curved" id="login" name="commit" type="submit" value="Submit" />
<input class="curved" id="register" name="commit" type="submit" value="Register" />
<input class="curved" id="pass-reset" name="commit" type="submit" value="Send Reset Instructions" />
<a href="#" id="forgot-pw">Forgot pass?</a>
</div>
I tried the following but it didn't work:
$('#user_new').validate({
debug: true,
rules: {
user_username: "required",
user_email: {
required: true,
email: true
}
},
messages: {
user_username: "Please specify your name",
user_email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of [email protected]"
}
}
});
So would love any advice on how I can get this going.
Edit1: Any thoughts or possible solutions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
此处已回答此问题:
如何做我在 jQuery 中进行客户端表单验证?
最初在这里:
如何在cakephp表单中使用jquery.validate插件
This has been answered here:
How do I do client-side form validation in jQuery?
and originally here:
How to use jquery.validate plugin in cakephp form