adding support for twitter bootstrab and simple form #286

Closed
fluxsaas opened this Issue Feb 26, 2012 · 17 comments

Comments

Projects
None yet
10 participants

Hey,

i did not found an easy solution to add the functionality to the gem, so here is my solution to add simple form with twitters bootstrap to client side validation:

    ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
      add: function(element, settings, message) {
        var errorElement, wrapper;

        settings.wrapper_tag = ".control-group";
        settings.error_tag = "span";
        settings.error_class = "help-inline";
        settings.wrapper_error_class = "error";

        if (element.data('valid') !== false) {
          wrapper = element.closest(settings.wrapper_tag);
          wrapper.addClass(settings.wrapper_error_class);
          errorElement = $("<" + settings.error_tag + "/>", {
            "class": settings.error_class,
            text: message
          });
          return wrapper.find(".controls").append(errorElement);
        } else {
          return element.parent().find("" + settings.error_tag + "." + settings.error_class).text(message);
        }
      },
      remove: function(element, settings) {
        var errorElement, wrapper;

        settings.wrapper_tag = ".control-group";
        settings.error_tag = "span";
        settings.error_class = "help-inline";
        settings.wrapper_error_class = "error";

        wrapper = element.closest("" + settings.wrapper_tag + "." + settings.wrapper_error_class);
        wrapper.removeClass(settings.wrapper_error_class);
        errorElement = wrapper.find("" + settings.error_tag + "." + settings.error_class);
        return errorElement.remove();
      }
    };

maybe it helps somebody..

Contributor

bcardarella commented Feb 26, 2012

This type of support won't be added to the core gem. You're welcome to create a plug similar to https://github.com/dockyard/client_side_validations-simple_form

yeah, i did't wanted to suggest that. but i'm sure i'm not the only one searching for a hint... anyways great plugin by the way.

github needs a feature for sharing ratable tips for a each project. :)

Contributor

bcardarella commented Feb 26, 2012

Yeah, maybe the wiki is a better place? :)

If you decide to add to the wiki please add to the simple_form wiki:

https://github.com/dockyard/client_side_validations-simple_form/wiki

The plugin seems to be broken for simple_form 2.0 and 2 months no updates,
does above code snippet work for latest simple form and bootstrap 2?
And where exactly would it be placed? thx

order:

//= require ./lib/rails.validations.js
//= require ./lib/rails.validations.simple_form.js

"should" work...

it's for simple form with twitter bootstrap: https://github.com/rafaelfranca/simple_form-bootstrap

milyord commented Apr 19, 2012

I played around with this and it works great.
The Stack:

  1. Twitter Bootstrap 2.0.2
  2. Simple Form 2.0
  3. Client Side Validations 3.2.0beta3

Just add the following snippet to the bottom of rails.validations.js
It can be cleaned up a bit but it works.

// SimpleForm - Twitter Bootstrap Integration

(function() {
  $(document).ready(function() {
    return $("div.control-group").focusout(function() {
      if (!$("div.control-group").hasClass("error")) {
        return $(this).addClass("success");
      }
    });
  });
}).call(this);

ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
  add: function(element, settings, message) {
    var errorElement, wrapper;

    settings.wrapper_tag = ".control-group";
    settings.error_tag = "span";
    settings.error_class = "help-inline";
    settings.wrapper_error_class = "error";
    settings.wrapper_success = "success";

    if (element.data('valid') !== false) {
      wrapper = element.closest(settings.wrapper_tag);
      wrapper.removeClass(settings.wrapper_success);
      wrapper.addClass(settings.wrapper_error_class);
      errorElement = $("<" + settings.error_tag + "/>", {
        "class": settings.error_class,
        text: message
      });
      return wrapper.find(".controls").append(errorElement);
    } else {
      wrapper = element.closest(settings.wrapper_tag);
      wrapper.addClass(settings.wrapper_error_class);
      return element.parent().find("" + settings.error_tag + "." + settings.error_class).text(message);
    }
  },
  remove: function(element, settings) {
    var errorElement, wrapper;

    settings.wrapper_tag = ".control-group";
    settings.error_tag = "span";
    settings.error_class = "help-inline";
    settings.wrapper_error_class = "error";
    settings.wrapper_success = "success";

    wrapper = element.closest("" + settings.wrapper_tag + "." + settings.wrapper_error_class);
    wrapper.removeClass(settings.wrapper_error_class);
    wrapper.addClass(settings.wrapper_success);
    errorElement = wrapper.find("" + settings.error_tag + "." + settings.error_class);
    return errorElement.remove();
  }
};

@badem4o

Your solution worked perfectly.
Thank you so much.

heads up to anyone who reads this, I did have to copy the simple_form and formtastic rb files from an old gem into the new
I'm not sure if that something weird strictly on my end though

@badem4o I couldn't get it to work; can you explain more what does it mean that you copied rb files from old gem into new gem?

milyord commented May 9, 2012

Read the previous comment posted by me. Make sure you are using the same version gems.

Works perfectly. Thank you!

Incase this helps someone my gemfile looks like this

gem 'simple_form'
gem 'client_side_validations', :git => "git://github.com/bcardarella/client_side_validations.git", :tag => "v3.2.0.beta.3"

ddarren commented May 18, 2012

Thanks guys, works perfectly for me too. I hope you all don't mind, but to make this solution more public I wrote up a blog post: http://www.ddarrensmith.com/blog/2012/05/17/ruby-on-rails-client-side-validation-with-validation-helpers-and-twitter-bootstrap/

And did an example project: https://github.com/ddarren/Rails-Client-Side-Validations-with-Twitter-Bootstrap-Example

And added the above JavaScript to a Gist: https://gist.github.com/2705324

Be happy to reference anyone specifically for the JavaScript, just ask. :)

Dakuan commented Jul 5, 2012

/Users/Dom/.rvm/gems/ruby-1.9.3-p194/gems/activesupport-3.2.3/lib/active_support/dependencies.rb:251:in `require': cannot load such file -- client_side_validations/simple_form (LoadError)

^im following the steps above but getting this error...

Contributor

bcardarella commented Jul 5, 2012

what version of the gem and SimpleForm are you using?

Dakuan commented Jul 6, 2012

simple form 2.0 and '3.2.0.beta.3' for the validations. and the mongoid gem too.

'3.2.0.beta.3' seemed to be missing the simple_forms.rb file. I grabbed that file from the master branch and then it will run.

However then I got js errors, with window.ClientSideValdations being undefined. This was coming from some inline scripting that I think simpleforms dumps into the page. The inline script was at the top of the page and was being run before any other scripts got loaded. I moved my script_tag to the top of the page and now it's all rainbows and kittens. Seems a bit of a shame to have to move all my js to the top of the page but I can live with that.

@Dakuan What exactly do you mean about moving the JS files up? I'm having the same issue... my javascript is all running in the top of the app <head> but I'm getting the undefined errors...

Contributor

bcardarella commented Oct 26, 2012

@Dakuan can you paste your resulting HTML and the contents of your Gemfile.lock?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment