Question

我使用Semantic UI作为Rails项目的CSS框架。我正在尝试使用表单验证来处理使用form_tag帮助程序创建的表单。除了没有显示错误消息之外，一切似乎都在起作用。如果检查HTML，您可以看到包含错误消息的<li>元素通过语义UI添加到DOM，它们只是不可见。如果我在常规HTML表单上执行相同的操作而不是form_tag帮助程序生成的表单，则一切正常。就好像Rails的form_tag助手会抛出Semantic UI用来选择<div>并显示错误的选择器。

以下是表格：

注意：表单嵌套在<div class="ui form">内，以便样式正常工作。这可能是问题的一部分。

<div class="ui form">
  <%= form_tag review_path, method: :put, class: "review-form" do |f| %>
    <%= hidden_field_tag :user_id, current_user.id %>
    <%= hidden_field_tag :id, skatepark.id %>
    <div class="field">
      <%= text_area_tag :review, nil, placeholder: 'Write review here...' %>
    </div>
    <%= submit_tag 'Review', class: "ui button" %>

    <div class="ui error message"></div>
  <% end %>
</div>

和JS：

$('.review-form').form({
  fields: {
    review: {
      identifier  : 'review',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter a value'
        }
      ]
    },
  },
});

Answer 1

将ui form类从div标记向下移动到form标记。如果没有这样做，.form()插件似乎有其怪癖。

<强>结果：

<div>
  <%= form_tag review_path, method: :put, class: "ui form review-form" do |f| %>
    <!-- rest of code -->
  <% end %>
</div>

<强>段：

＆＃13;

$(function() {
  $('.review-form').form({
    fields: {
      review: {
        identifier: 'review',
        rules: [{
          type: 'empty',
          prompt: 'Please enter a value'
        }]
      },
    },
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<div class="ui container">
  <div class="ui two columns grid">
    <div class="column">
      <h3 class="ui header">Classes on DIV</h3>
      <div class="ui form">
        <form class="review-form">
          <div class="field">
            <textarea id="review" rows="2" placeholder="Write review here"></textarea>
          </div>
          <button class="ui button">Submit</button>
          <div class="ui error message"></div>
        </form>
      </div>
    </div>
    <div class="column">
      <h3 class="ui header">Classes on FORM</h3>
      <div>
        <form class="ui form review-form">
          <div class="field">
            <textarea id="review" rows="2" placeholder="Write review here"></textarea>
          </div>
          <button class="ui button">Submit</button>
          <div class="ui error message"></div>
        </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

rails中的语义ui表单验证（错误消息不可见/未显示）

1 个答案: