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，我想我只需要弄清楚如何让它与前端进行交互。

EDIT。一个简单的演练，让Parsley-Rails工作，有一个例子。

我离开这个项目一会儿，然后回来让它运转起来。我想快速提供一个指南，让Parsley为其他需要快速回答的人工作。

第1步：包含gem＆＃34; parsley-rails＆＃34;。一定要运行bundle命令。

第2步：包含以下CSS，这只是一些用于显示错误/成功的入门代码。

资产/样式表/ 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步：添加＆＃39; data-parsley-validate＆＃39;你的表格。

在：

<%= 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，并且在资产管道清单文件中需要使用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”部分。

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

Ruby on Rails：使用Parsely-Rails

EDIT。一个简单的演练，让Parsley-Rails工作，有一个例子。

1 个答案: