3

我在询问是否使用带有 Rails 表单助手的 Twitter Bootstrap 模式窗口并显示表单验证错误消息。我正在使用带有 Rails 3.2 的 Twitter Bootstrap 2.0。

我在 Twitter Bootstrap 模式窗口中有一个表单。页面上有一个按钮可以打开模式窗口并显示表单。一切都很好，除了当表单提交错误时，页面显示并且看不到错误消息，因为表单位于（最初未显示的）模式窗口内。

我需要使用 jQuery 来测试表单是否包含 Rails 错误消息并覆盖“display: none;” 呈现页面时的样式（或切换模式窗口以显示）。

我尝试将以下代码添加到我的 assets/javascripts/application.js 文件中，但它不起作用：

$('document').ready(function() {
  if ($('#error_explanation').length > 0) {
    $("#request_invite").css("display", "block");
  }
})

并且：

$('document').ready(function() {
  if ($('#error_explanation').length > 0) {
    $("#request_invite").modal('toggle');
  }
})

当出现错误消息时，我需要做什么来显示模式窗口或将其打开？

下面是在 Twitter Bootstrap 模式窗口 (Haml) 中显示表单的代码：

#request-invite.modal{:style => "display: none;"}
  = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
    .modal-header
      %a.close{"data-dismiss" => "modal"} ×
      %h3 Request Invitation
    .modal-body
      - if @user.errors.any?
        #error_explanation
          %ul
            - @user.errors.full_messages.each do |msg|
              %li= msg
      %p
        = f.label :email
        %br/
        = f.email_field :email
    .modal-footer
      = f.submit "Request Invitation", :class => "btn.btn-success"
      %a.btn{"data-dismiss" => "modal", :href => "#"} Close
#romance-copy{:style => "text-align: center; margin-top: 100px"}
  %h2 Want in?
#call-to-action{:style => "text-align: center; margin-top: 100px"}
  %a.btn.btn-primary.btn-large{"data-toggle" => "modal", :href => "#request-invite"} Request invite
4

5 回答 5

3

好像是笔误？您在 Haml 中的 div 具有 ID request-invite（带有破折号）。但是，您的 jQuery 正在寻找带有下划线的 ID。

于 2012-04-04T19:52:08.980 回答
2

我想提供另一种选择。您使用的方式应该可以，但是为什么不使用 AJAX 在有任何错误时显示错误消息。响应 JS 所做的是添加额外的样式以显示错误消息。

我需要使用 jQuery 来测试表单是否包含 Rails 错误消息并覆盖“display: none;” 呈现页面时的样式（或切换模式窗口以显示）。

看看http://www.twitmark.me/。尝试使用推特登录。输入一个伪造的邀请码，看看错误是什么样的。这是一个更好的解决方案吗？

于 2012-04-05T00:15:10.283 回答
2

正如@wanghq（部分由@miked）所述，我认为最好的方法是使用AJAX 在模态中呈现html 并提交表单数据。这样，所有逻辑都委托给服务器端，仅使用 JS 来实现效果并保持视图干净（视图内部不涉及助手或逻辑）。

有了这个解决方案，当 JS 在客户端上不起作用时，您可以通过使用相同的控制器操作来呈现表单，从而优雅地降级。一个简单的例子：

def new
  @user = User.new
  # some stuff...
  render :handler => 'haml', :layout => !request.xhr?
end

# similar logic should be used for #create action

对于 (d)html 部分，您可以使用 ruby​​ 来检测它是否应该因为错误而显示。我的意思是这样的（如果需要，您可以编写一个助手）：

#request-invite.modal{:style => "display: #{ @user.errors.any? ? 'block' : 'none' };"}

附带说明一下，使用 simple_form 2.0.x，您将获得 twitter-bootstrap 标记支持（我的意思是，它将为您的表单生成引导友好的标记）。通过这种方式，您将干掉模板内的一些逻辑（例如：检查@user.errors 以显示错误消息）

这样，你不应该需要 JS 来做检查；）

我的 2 美分 ;-)

于 2012-04-05T08:33:43.027 回答
1

我可能误解了这个问题，但据我所知，当模式加载时，您的 error_explanation div 没有隐藏（显示：无），它不存在，因为它以 if @user.errors.any 为条件？堵塞。因此，你扔给它的 javascript 并不重要，它不存在。

对于初学者，请尝试：

.modal-body
  #error_explanation
    - if @user.errors.any?
      %ul
        - @user.errors.full_messages.each do |msg|
          %li= msg

这样，div 将存在，并且 ul 将仅在显示错误时才显示项目。

于 2012-04-04T19:52:21.093 回答
1

为什么需要 jQuery？为什么不直接使用已有的条件？

这段代码很烂，你可能会清理它（将它移动到帮助程序或其他东西中），但你会明白的。

- def display?; @user.errors.any? ? "block;" : "none;"; end;
#request-invite.modal{:style => "display: " + display? }
于 2012-04-04T20:53:42.427 回答