Рубин на рельсах:Использование 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>

Любая помощь будет принята с благодарностью.У меня уже установлен драгоценный камень, думаю, мне просто нужно выяснить, как заставить его взаимодействовать с интерфейсом.

РЕДАКТИРОВАТЬ.Простое пошаговое руководство по работе Parsley-Rails с 1 примером.

Я ненадолго отошел от этого проекта, затем вернулся и заставил его работать.Я хотел быстро предоставить руководство, которое поможет Петрушке работать на рельсах для всех, кому нужен быстрый ответ.

Шаг 1: Включите драгоценный камень «рельсы петрушки».Обязательно запустите команду пакета.

Шаг 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: Добавьте 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» и, как сказано в инструкциях, петрушка требуется в файле манифеста конвейера ресурсов.

Во-первых, вам нужно добавить «data-parsley-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, а синтаксис указан в разделе документации «Пользовательский интерфейс для поля».

Наконец, мне было полезно проверить Примеры представлено на сайте Parsley.js.Убедитесь, что сгенерированный HTML-код соответствует их синтаксису, если вы не видите желаемого поведения.