Combine Parsley.js and Twitter Bootstrap

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_self
//= require_tree ./global
//= require parsley

bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not
//       have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");

// Font Awesome
@import "fontawesome";

.control-group.error input.parsley-validated{
  color: @errorText !important;
  background-color: @errorBackground !important;
  border: 1px solid #EED3D7 !important;
}

Gemfile

source 'https://rubygems.org'
gem "twitter-bootstrap-rails", ">= 2.2.6", :group => :assets
gem "parsley-rails", "~> 1.1.16.0", :group => :assets

new.html.erb

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:novalidate => "novalidate"}) do |f| %>
  <%= devise_error_messages! %>
  <fieldset>
    <div class="control-group">
      <%= f.label :name %>
      <div class="form-inline">
        <div class="controls">
          <%= f.text_field :name, :placeholder => "J. Doe", :"data-required" => "true", :"data-notblank" => "true" %>
        </div>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :email %>
      <div class="controls">
        <%= f.email_field :email, :placeholder => '[email protected]', :"data-required" => "true", :"data-notblank" => "true", :"data-type" => "email"  %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :password %>
      <div class="form-inline">
        <div class="controls">
          <%= f.password_field :password, :placeholder => 'min. 6 characters', :"data-required" => "true", :"data-notblank" => "true", :"data-minlength" => "6" %>
        </div>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :password_confirmation %>
      <div class="form-inline">
        <div class="controls">
          <%= f.password_field :password_confirmation, :"data-required" => "true", :"data-equalto" => "#user_password", :"data-equalto-message" => 'The password confirmation should match the password' %>
        </div>
      </div>
    </div>
    <div class="">
      <%= f.submit I18n.t('generic.view.sign_up'), :class => "btn btn-primary" %>
    </div>
  </fieldset>
<% end %>

<% content_for :additional_js do -%>
  <%= javascript_include_tag "page_specific/devise/registrations_new" %>
<% end -%>

registrations_new.js.coffee.erb

jQuery ->
  $('#new_user').parsley({
    successClass: 'success',
    errorClass: 'error',
    errors: {
      classHandler: (el) ->
        return $(el).closest('.control-group')
      , errorsWrapper: '<span class=\"help-inline\"></span>'
      , errorElem: '<span></span>'
    }
  })