Ruby on Rails: Using Parsely-Rails

Question

I'm trying to validate input fields using Parsely. I've figured out is that if I add <form data-parsley-validate> ... </form> none of my buttons work so I can't navigate (continue to the next page).

So here's an example of what I have, and all I would like to do is make it required, and within a range of 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>

Any help would be greatly appreciated. I already have the gem installed, I think I just need to figure out how to get it to interact with the front-end.

EDIT. A simple walkthrough to get Parsley-Rails working, with 1 example.

I walked away from this project for a short while, then came back and got it working. I wanted to quickly provide a guide that will get Parsley working for rails for anyone else that needs a quick answer.

Step 1: Include the gem "parsley-rails". Be sure to run your bundle command.

Step 2: Include the following CSS, which is just some starter code for the display of errors/successes.

assets/stylesheets/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;
}

Step 3: Add 'data-parsley-validate' to your forms.

Before:

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

After:

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

Step 4: Make some field required.

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

And that's it. I hope this helps someone else in the future.

Answer 1

I'm assuming you're using the latest version of the "parsley-rails" gem, and have required parsley in your asset pipeline manifest file, as the instructions say.

First, you need to add 'data-parsley-validate' to each form, as you have done. I'm using form_for, and the syntax that worked for me was:

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

For the fields which you want validated, the Built-in Validators section of the documentation is helpful to show you the different techniques for validation. You can use the "range" validator to check that values are within a given range.

Parsley.js supports some HTML5 attributes such as "required" in addition to it's own list. Here is an example of how to validate that a "name" text field is present and at least two characters long, triggering validation on blur:

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

Trigger options use jQuery, and the syntax is listed in the "UI for field" section of the docs.

Lastly, I found it helpful to check out the examples provided on the Parsley.js site. Ensure that your generated HTML matches their syntax if you are not seeing the desired behavior.