How to generate inline javascript by gem for form validation etc...

This tutorial is about generating an inline javascript by gem created by us. This can be usable for form validation or another javascript application. This tutorial is for Ruby on Rails 3. I don't write full code, because it could be too deep, I just try to show to you how to give inline javascript code by  js template to a single view page.

First, we need to create our own gem file structure:

- jsvalidator

- lib

- jsvalidator.js.erb
- jsvalidator.rb

- jsvalidator.gemspec

Then we edit the jsvalidator.gemspec file which is in jsvalidator directory have been created.

Gem::Specification.new do |spec|
   spec.name = 'jsvalidator'
   spec.version ='0.0.1'
   spec.files = ["lib/jsvalidator.js.erb", "lib/jsvalidator.rb"]
   spec.summary = "Javascript form validator for rails3 with javascript."
   spec.author = 'Programmer'
   spec.email = 'programmer@yourdomain.com'
   spec.homepage = 'http://www.yourdomain.com'
   spec.has_rdoc = false
 end 

We create our class structure in jsvalidator.rb file. You can install erubis gem with "gem install erubis" command.

require 'rubygems'
require 'active_support'
require 'erubis'

class Jsvalidator
# define a form object
attr_accessor :form

def form
 return @form
end


# now we don't initialize anything, but you can set initial values in this block
def initialize
end

# we create a function to define our form, what is now an another object class defined later
def define_form(attributes={})
 f=Form.new(attributes)
 @form=f if f
end

# jsvalidator_helper is a function, we will call using Jsvalidator class
 def jsvalidator_helper
# __FILE__ is the path where the this rb file is 
  path=File.dirname(__FILE__)
  template_path=File.join(path, 'jsvalidator.js.erb')
# we can give objects to javascript template like @jsvalidator, what is self in this case,
# beacuse now we work with Jsvalidator class only
  vars={ '@jsvalidator' => self }
# so read the javascript template
  template= File.read(template_path)
# Erubis can execute inline ruby expressions with objects (formed like: <%= @jsvalidator.any %>)
  javascript=Erubis::Eruby.new(template).result(vars)
# then we create return string
  javascript=""
  return javascript
 end

#end of Jsvalidator class
end

# then we must define our Form class
class Form < Jsvalidator
# You can create any object in it, now we use form.id only
attr_accessor :id
def initialize(attributes={})
  @id=attributes[:id]
end
end

In this file we should create our model, or data structure, we will use at jsvalidator.html.erb in another function of course. Then, we edit the jsvalidator.js.erb file. In this file we define our javascript code, but remember, this is a template, so you can use ruby expressions like: <%= @jsvalidator.anything %>, but first you must define objects in Form class. Now we use @form.id only.

document.observe("dom:loaded", function()
{
new Form.Observer("<%= @jsvalidator.form.id %>", 0.3, function(form, value)
 {
// now we got form values in one single url-formed linein value javascript variable
// so we create an array of key and value pairs in textArray
  var textArray=unescape(value).split("&");
  var i=0;
  for(i=0; i<(textArray.length); i++)
  {
// then, you can see all elements within a for loop  
// now textArray[i] is one line like: "form_element_name=form_element_value"

   value_line_with_equal_sign=textArray[i];
   value_name="";
   value_value="";
   value_name=value_line_with_equal_sign.split("=",2)[0];
   value_value=value_line_with_equal_sign.split("=",2)[1];
// now you can check all of form values in this loop, value_name is the form element name
// value_value is form element's value
// probably you must give form elements to Form class

}

}
} 

After then, you can build your gem file at jsvalidator directory at command line:

gem build jsvalidator.gemspec

and install:

sudo gem install jsvalidator

Then edit your Gemfile, what is located at your rails3 application's directory, and insert this line with your real path:

gem 'jsvalidator', :path = "/home/user/gems/jsvalidator", :require = "jsvalidator"

Then type command line:

bundler update

If you don't want to create a working gem because of developing, you can just simply add to your application_controller.rb file this line with your path:

require '/home/user/gems/jsvalidator/lib/jsvalidator.rb'

Now at your view file, you just simply call helper like this:

<% @jsvalidator=Jsvalidator.new %>
<% @jsvalidator.define_form( :id => "your_form_id" ) %>
<%= raw @jsvalidator.jsvalidator_helper %>

That's all.