Repository is archived
No commit activity in last 3 years
No release in over 3 years
Rails Form Builder supports Client-side validation using jQuery BootstrapValidator plugin. https://github.com/nghuuphuoc/bootstrapvalidator
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 4.1
~> 1.3

Runtime

 Project Readme

Bootstrap Validator Rails

Rails client side validation using BootstrapValidator Plugin: https://github.com/nghuuphuoc/bootstrapvalidator Bootstrap Form as the form builder. https://github.com/bootstrap-ruby/rails-bootstrap-form

Installation

gem install bootstrap_validator_rails

or add this to your Gemfile

gem 'bootstrap_validator_rails', '~> 1.1.0'

then run

bundle install

Usage

Add this to your application.js

//= require bootstrapValidator
//or
//= require bootstrapValidator.min

and your application.css

/*= require bootstrapValidator */
/* or */
/*= require bootstrapValidator.min */

In you model

class Product
  validates :name, presence: true
  validates :price, numericality: {greater_than: 20}
  validates :intro, length: {in: 50..200}
  validates :terms_of_service, acceptance: {on: :create} # only validates if new_record?
  validates :sku, format: {with: /\A[a-zA-Z]+\z/, message: "only allows letters"}
  # Thank Brian Cardarella for this: http://reefpoints.dockyard.com/ruby/2011/11/18/convert-ruby-regexp-to-javascript-regex.html
end

In your form

= bv_form_for(@product) do |f|
  = f.text_field :name
  = f.text_field :price

Please make sure to add the script

$(document).ready(function() {
  $('#your_form').bootstrapValidator();
});

Generated HTML

<input id='product_name' name='product[name]' data-bv-notempty='' data-bv-notempty-message='cannot be blank'/> 
<input id='product_price' name='product[price]' data-bv-greaterthan-inclusive='false' data-bv-greaterthan-value='20' />

ActiveRecord Message

activerecord:
  errors:
    models:
      post:
        attributes:
          title:
            blank: is required

Please see: http://guides.rubyonrails.org/i18n.html#error-message-scopes

List of helpers supported

  • color_field
  • date_field
  • datetime_field
  • datetime_local_field
  • email_field
  • month_field
  • number_field
  • password_field
  • phone_field
  • range_field
  • search_field
  • telephone_field
  • text_area
  • text_field
  • time_field
  • week_field
  • check_box

Please refer to Bootstrap Form: https://github.com/bootstrap-ruby/rails-bootstrap-forms

List of validators supported

  • presence
  • numericality
    • only_integer
    • greater_than
    • greater_than_or_equal_to
    • less_than
    • less_than_or_equal_to
    • odd
    • even
  • length
    • is
    • within
    • in
    • minimum
    • maxiumum
  • format
    • with: regular expression
  • acceptance
  • in progress ...

Using Simple Form, Formtastic, Rails Form?

Add this to your application.js

//= require bootstrapValidatorRails

And in your HAML/ERB

.my-awesome-form= simple_form_for @post do |f|
  = f.input :title

= bv_javascript_for @post

Actually bv_javascript_for generates script like this

//<![CDATA[
  $(document).ready(function() {
    bv_form('.bv_form', {"fields":{"post[title]":{"validators":{"notEmpty":{"message":"can't be blank"},"regexp":{"regexp":"^[a-zA-Z]+$","message":"only allows letters"}}},"post[price]":{"validators":{"step":{"message":"should be odd","base":1,"step":2}}},"post[accepted]":{"validators":{"notEmpty":{"message":"should be accepted"}}}}})
  });
//]]>

So make sure that you have added bv_form to your form classes

= simple_form_for @post, html: {class: 'bv_form'} do |f|
  = f.input :title

Please note that as BootstrapValidator jQuery plugin is based on Bootstrap so make sure that your form markup is following Bootstrap Form

<div class="form-group">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="terms">
      Check yourself
    </label>
  </div>
</div>