Java script validations

Have a look at my client-side validation plugin

http://www.agilewebdevelopment.com/plugins/client_side_validation

required:
http://www.agilewebdevelopment.com/plugins/validation_reflection

Michael

Does this degrade gracefully when users are not able to use Javascript?

That was probably a dumb question… looks like it doesn’t affect normal flow.

Cool michael, but where I put the code to validate? I used to write my
own javascript validators and put them inside a <script></script> in
my layouts.

As long as you don't need rather special validations there is no need to
write *any* JavaScript code of your own. You automatically get
validations corresponding to

* validates_presence_of
* validates_length_of
* validates_numericality_of
* validates_inclusion_of
* validates_format_of - as far as regular expressions are matched the
  same in Ruby and JavaScript

If you do need more special validations, see "Custom Checking" in the
README.

Judging from the questions I've got since I published the plugin, the
trickier part is to tell the user there's something wrong with their
entered data. The validator runs all the time, not just when the user
tries to submit a form. What it normally does is to
add/remove "invalid" to/from the class attribute of input elements
(text fields, selects, radio buttons). This change, of course is not
visible to the user. You can make it visible with a short bit of CSS

.invalid {
   border: 1px solid #f00;
}

Actually, I don't recommend doing it exactly like this. But the
specifics of error notification depend on the needs of your
application. There's also a way to supply a callback function to the
validator that is called whenever the validation status of the form
changes. For the details see the README and follow up with more
specific questions.

Michael

Ok...I'm trying to get this thing working, and I think I'm missing
something fundamental. Do you have a simple example available to look
at?

Here's what I've done:

1. Install Plugins
script/plugin install
svn://rubyforge.org//var/svn/clientsidevali/client_side_validation/trunk
script/plugin install
svn://rubyforge.org//var/svn/valirefl/validation_reflection/trunk

2. Create a model
class Post < ActiveRecord::Base
  validates_length_of :title, :within => 3..20
end

3. Create a controller
class PostsController < ApplicationController
  def create
    Post.create(params[:post])
  end
end

4. Create a view
<html><head>
  <%= stylesheet_link_tag 'posts' %>
  <%= javascript_include_tag :defaults %>
</head><body>
  <%= form_tag url = {:action => "create"}, options = {:class =>
'validated'}%>
  <p><label for="post_title">Title</label><br/>
  <%= text_field 'post', 'title' %></p>
  <%= submit_tag %>
  <%= end_form_tag %>
</body></html>

5. Create /public/javascripts/application.js
Form.Validator.installForAllValidatedForms();

6. Create a stylesheet
.invalid {
   border: 1px solid #f00;
}

7. Go to the browser, enter invalid input and expect something to
happen.

Chris. Here's what I did to get it working

1. In the plugin/client_side_validation/install.rb only include the
two js files
ActionView::Helpers::AssetTagHelper::register_javascript_include_defa
ult('validator')
ActionView::Helpers::AssetTagHelper::register_javascript_include_defa
ult('validators-en')
(This is included when defining <%=
javascript_include_tag :defaults %> in the layout)

Thanks for pointing this out. I have changed the code (and README) so
that none of the locale-specific validations are included by default.
Therefore, after updating the plugin, you have to include the necessary
file explicitly in your layout. So

<%= javascript_include_tag :defaults %>

has to become

<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'validators-en' %>

2. Add installForAllValidatedForms to the view
<script type="text/javascript">
  Form.Validator.installForAllValidatedForms();
</script>

I recommend adding that line of JavaScript to
public/javascripts/application.js as that file is included by default

3. set the form class as 'validated' (I'm using edge rails)
  <% form_for(:article, :url => articles_path, :html => {:class =>
"validated"}) do |f| %>

Yes.

Michael