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