ValidatedFields is a set of helpers for unobtrusive frontend validations using HTML5 attributes, Rails 3 validators and JavaScript.
It overrides the default Rails form helpers and uses validator reflection to gather validation rules declared in model classes.
Here's a basic example, just to give you an idea what the plugin does:
class User < ActiveRecord::Base
validates :name, :presence => true, :message => 'Name is required'
end
<%= form_for(@user, :validate => true) do |f| %>
<%= f.text_field :name %>
<% end %>
The rendered text field would look like this:
<input class="validated" data-validates="presence" data-error-presence="Name is required" id="user_name" name="user[name]" required="required" type="text" />
With these custom attributes in place, we can easily validate the field using JavaScript. The gem comes with a prepackaged jQuery validator you can easily adjust to your needs.
rails generate validated_fields:javascript
The command above will install validated-fields.js file in your public/javascripts/ directory. Include that file in your views and implement validation callbacks:
$(document).ready(function() {
new ValidatedFields(
// function called when validation fails
function(element, errorMsg) {
element.css('border', '1px red solid');
element.next('span.error').html(errorMsg); // show error message
},
// function called when validation succeeds
function(element) {
element.css('border', '1px green solid');
element.next('span.error').html(''); // clear error message
}
);
});
Add the following line to your Gemfile and run bundle install:
gem 'validated_fields', :git => 'http://github.com/alluniq/validated-fields.git'
By default validated-fields supports the following built-in validators:
- presence
- format
- length
- numericality
If you'd like use your own validators, you'll need to create a module with prepare_options method:
class EmailValidator < ActiveModel::EachValidator
EMAIL_REGEX = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i
def validate_each(record, attribute, value)
record.errors[attribute] << (options[:message] || "invalid email format") unless value =~ EMAIL_REGEX
end
end
class User
validates :email, :email => true
end
module ValidatedField
module Validators
module EmailValidator
def self.prepare_options(validator, options)
options[:pattern] = EmailValidator.EMAIL_REGEX.inspect
options["data-error-email"] = validator.options[:message] if validator.options[:message].present?
options
end
end
end
end
You can customize the JavaScript validator as well. Once you have the required validator helper, extend the ValidatedFields class with your new validation methods:
ValidatedFields.prototype = {
validateEmail: function(element, errors) {
var value = jQuery.trim(element.attr('value'));
if (notValid) {
this.errorCallback(element, errors["email"]); // data-error-email
return false;
}
return true;
}
};
- Fork the project.
- Make your feature addition or bug fix.
- Add tests for it. This is important so I don't break it in a future version unintentionally.
- Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
- Send me a pull request. Bonus points for topic branches.