Question

在我的rails应用程序中，我正在使用客户端验证来显示错误消息。我想使用bootstrap在工具提示上显示此消息。如何更改我的代码以便在工具提示中显示... 现在，错误消息来自config / initializers / client_side_validation.rb

 ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}"    class="message">#{instance.error_message.first}</label></div>}.html_safe
   else
     %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
   end
end

请提出任何建议。提前谢谢。

Answer 1

这对我有用：

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  unless html_tag =~ /^<label/
    %{<div class="field_with_errors">#{html_tag}<div class="tooltip-validate fade right in" style="display: block;"><div class="tooltip-validate-arrow"></div><div class="tooltip-validate-inner"><label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div></div></div>}.html_safe
  else
    %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
  end

end


# css
.tooltip-validate {
  position: absolute;
  z-index: 1030;
  display: inline;
  padding: 5px;
  font-size: 11px;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;
}

.tooltip-validate.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}



.tooltip-validate.right {
  margin-left: 227px;
  margin-top: -43px;
}


.tooltip-validate-inner {
  max-width: 350px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.tooltip-validate-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}


.tooltip-validate.right .tooltip-validate-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-right-color: #000000;
  border-width: 5px 5px 5px 0;
}

使用工具提示，rails进行客户端验证

1 个答案: