ruby-on-rails - ruby rails : Using Parsely-Rails

Question

我正在尝试使用 Parsely 验证输入字段。我发现如果我添加 <form data-parsley-validate> ... </form>我的所有按钮都不起作用，所以我无法导航(继续到下一页)。

所以这是我所拥有的一个例子，我想做的就是让它成为必需的，并且在 100-350 的范围内。

<form data-parsley-validate>
  <ol>
<li>
  <p>
    <div class="measure_question">
          <b>Weight</b><i>(pounds):</i>
        </div> 
    <div class="measure_answer">
          <%= text_field(:baseline, :base_weight, :style => "width:100px;") %>
        </div> 
  </p>
</li>    
  </ol>
</form>

如有任何帮助，我们将不胜感激。我已经安装了 gem，我想我只需要弄清楚如何让它与前端交互。

编辑。一个让 Parsley-Rails 正常工作的简单演练，包含 1 个示例。

我暂时离开了这个项目，然后回来让它开始工作。我想快速提供一个指南，让 Parsley 为 rails 工作，供任何需要快速回答的人使用。

第 1 步:包含 gem“parsley-rails”。请务必运行您的捆绑命令。

第 2 步:包括以下 CSS，这只是一些用于显示错误/成功的起始代码。

Assets /样式表/custom.css.scss

/* Parsley */

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in-;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

第 3 步:将“data-parsley-validate”添加到您的表单。

之前:

<%= form_for @your_form do |f| %>

之后:

<%= form_for @your_form, html: {"data-parsley-validate" => ''} do |f| %>

第 4 步:将一些字段设为必填。

<%= text_field(:your_table, :weight_variable, :style => "width:100px;", :required => '') %>

就是这样。我希望这对将来的其他人有所帮助。

Answer 1

我假设您使用的是最新版本的“parsley-rails”gem，并且按照说明在您的 Assets 管道 list 文件中要求使用 parsley。

首先，您需要向每个表单添加“data-parsley-validate”，正如您所做的那样。我正在使用 form_for，对我有用的语法是:

<%= form_for @user, html: { 'data-parsley-validate' => '' } do |f| %>

对于您要验证的字段，Built-in Validators文档的一部分有助于向您展示不同的验证技术。您可以使用“范围”验证器来检查值是否在给定范围内。

除了它自己的列表之外，Parsley.js 还支持一些 HTML5 属性，例如“required”。下面是一个示例，说明如何验证“名称”文本字段是否存在且至少有两个字符长，从而触发对模糊的验证:

<%= f.text_field :name, required: true, 'data-parsley-minlength' => '2', 'data-parsley-trigger' => 'blur' %>

触发器选项使用 jQuery，语法列在文档的“UI for field”部分。

最后，我发现查看 examples 很有帮助在 Parsley.js 网站上提供。如果您没有看到所需的行为，请确保您生成的 HTML 与其语法匹配。