我正在尝试使用PERSELY验证输入字段。我想到了,如果我添加一个按钮工作的<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>
.

将非常感谢任何帮助。我已经安装了创业板,我想我只需要弄清楚如何让它与前端进行交互。

编辑。一个简单的演练,让欧芹铁路工作,有一个例子。

我走了一小段时间了,然后回来了它。我想快速提供一个指南,让欧芹为需要快速答案的其他人为rails工作。

步骤1:包括宝石“欧芹铁路”。请务必运行捆绑命令。

步骤2:包括以下CSS,这只是一些启动代码,用于显示错误/成功。

资产/ styledeets / 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 => '') %>
.

而这就是它。我希望这有助于未来的别人。

有帮助吗?

解决方案

我假设您使用最新版本的“欧芹 - Rails”Gem,并且在指令说明时,您的资产流水线清单文件中需要欧芹。

首先,您需要将“Data-Parsey-validate”添加到每个表单,如您所做的那样。我正在使用form_for,而对我有效的语法是:

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

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

parsley.js还支持一些HTML5属性,例如“必需”,除了自己的列表。以下是如何验证存在“名称”文本字段的示例以及至少两个字符长,触发模糊上的验证:

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

触发器选项使用jQuery,语法列在文档的“UI for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for the。

最后,我发现看看 在荷塞池网站上提供了帮助。如果您未看到所需的行为,请确保生成的HTML与其语法匹配。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top