# Java script validations

**URL:** <https://discuss.rubyonrails.org/t/java-script-validations/5485>\
**Category:** rubyonrails-talk\
**Created:** [December 5, 2006, 5:35pm UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485 "2006-12-05T17:35:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_Schuerig1](https://avatars.discourse-cdn.com/v4/letter/m/ccd318/32.png) [@Michael\_Schuerig1](https://discuss.rubyonrails.org/u/Michael_Schuerig1)\
**Post date:** [December 5, 2006, 5:35pm UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485/1 "2006-12-05T17:35:05Z")

</div>

Have a look at my client-side validation plugin

[http://www.agilewebdevelopment.com/plugins/client\_side\_validation](http://www.agilewebdevelopment.com/plugins/client_side_validation)

required: [http://www.agilewebdevelopment.com/plugins/validation\_reflection](http://www.agilewebdevelopment.com/plugins/validation_reflection)

Michael

---

<div class="post-metadata">

**Author:** ![bphogan](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/bphogan/32/4186_2.png) [@bphogan](https://discuss.rubyonrails.org/u/bphogan)\
**Post date:** [December 5, 2006, 6:39pm UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485/2 "2006-12-05T18:39:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bphogan](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/bphogan/32/4186_2.png) [@bphogan](https://discuss.rubyonrails.org/u/bphogan)\
**Post date:** [December 5, 2006, 6:41pm UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485/3 "2006-12-05T18:41:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Fernando\_Lujan](https://avatars.discourse-cdn.com/v4/letter/f/3da27b/32.png) [@Fernando\_Lujan](https://discuss.rubyonrails.org/u/Fernando_Lujan)\
**Post date:** [December 5, 2006, 7:39pm UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485/4 "2006-12-05T19:39:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Michael\_Schuerig1](https://avatars.discourse-cdn.com/v4/letter/m/ccd318/32.png) [@Michael\_Schuerig1](https://discuss.rubyonrails.org/u/Michael_Schuerig1)\
**Post date:** [December 5, 2006, 11:08pm UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485/5 "2006-12-05T23:08:33Z")

</div>

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 &nbsp;&nbsp;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 { &nbsp;&nbsp;&nbsp;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

---

<div class="post-metadata">

**Author:** ![Chris.Mohr](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@Chris.Mohr](https://discuss.rubyonrails.org/u/Chris.Mohr)\
**Post date:** [December 6, 2006, 1:23am UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485/6 "2006-12-06T01:23:24Z")

</div>

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 &nbsp;&nbsp;validates\_length\_of :title, :within =\> 3..20 end

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

4. Create a view \<html\>\<head\> &nbsp;&nbsp;\<%= stylesheet\_link\_tag 'posts' %\> &nbsp;&nbsp;\<%= javascript\_include\_tag :defaults %\> \</head\>\<body\> &nbsp;&nbsp;\<%= form\_tag url = {:action =\> "create"}, options = {:class =\> 'validated'}%\> &nbsp;&nbsp;\<p\>\<label for="post\_title"\>Title\</label\>\<br/\> &nbsp;&nbsp;\<%= text\_field 'post', 'title' %\>\</p\> &nbsp;&nbsp;\<%= submit\_tag %\> &nbsp;&nbsp;\<%= end\_form\_tag %\> \</body\>\</html\>

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

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

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

---

<div class="post-metadata">

**Author:** ![Michael\_Schuerig1](https://avatars.discourse-cdn.com/v4/letter/m/ccd318/32.png) [@Michael\_Schuerig1](https://discuss.rubyonrails.org/u/Michael_Schuerig1)\
**Post date:** [December 6, 2006, 9:55am UTC](https://discuss.rubyonrails.org/t/java-script-validations/5485/7 "2006-12-06T09:55:33Z")

</div>

> 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"\> &nbsp;&nbsp;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) &nbsp;&nbsp;\<% form\_for(:article, :url =\> articles\_path, :html =\> {:class =\> "validated"}) do |f| %\>

Yes.

Michael