Jquery Validation in Rails
This post hasn't been updated for 8 years
I. Introduction:
In Rails, we can validate the state of objects before they go into the database using Active Record's calidatetion feature. This modellevel validations are the best way to ensure that only valid data is saved into your database. But there are several other ways to validate data before saving, include client-side validations. Here an useful tool to validate in view: Jquery Validation.
II. Installation:
Add gem "jquery-validation-rails", including javascript assets and run bundle install
Gemfile
gem "jquery-validation-rails"
app/assets/javascripts/application.js
//= require jquery.validate
//= require jquery.validate.additional-methods
III. Validation:
Here an example of creating a new user using jquery validation
app/views/users/new.html.erb
<%= form_for(@user) do |f| %>
<%= f.label :username %>
<%= f.text_field :username %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.text_field :password %>
<%= f.label :password_confirmation %>
<%= f.text_field :password_confirmation%>
<%= f.label :birthdate %>
<%= f.text_field :birthdate %>
<%= f.label :introduction %>
<%= f.text_field :introduction %>
<% end %>
<script type="text/javascript">
<%= render "validate.js" %>
</script>
Adding some simple rules to user form like required, min/maxlength, number, digits...
app/views/users/_validate.js
$("#new_user").validate({
//error place
errorPlacement: function (error, element) {
error.insertBefore(element);
},
//adding rule
rules: {
// username is required with max of 20 and min of 6
"user[username]":{
required: true,
maxlength: 20,
minlength: 6
},
// email is required with format
"user[email]": {
required: true,
email: true
},
// password is required
"user[password]": {
required: true
},
// password_confirmation is required and is the same with password
"user[password_confirmation]": {
required: true,
equalTo: "#user_password"
},
// introduction is optional with maxlenght 500
"user[password_confirmation]": {
maxlength: 500
}
},
// error messages
messages: {
username:{
required: "Username is required.",
maxlength: "Username must be less than 20",
minlength: "Username must be more than 6"
},
mail:{
required: "Email is required",
email: "Please enter a valid email address"
},
password: {
required: "Password is required"
},
password_confirmation: {
required: "Password confirmation is required",
equalTo: "Password and password confirmation must be same"
}
}
});
We can also adding new rule to our validation by using addMethod
method
app/views/users/_validate.js
$("#new_user").validate({
//error place
errorPlacement: function (error, element) {
error.insertBefore(element);
},
//adding rule
rules: {
...
// introduction is optional with maxlenght 500
"user[password_confirmation]": {
maxlength: 500
},
// birthdate is required with format yyyy-mm-dd
"user[birthdate]": {
valid_date: 500
}
},
...
});
$.validator.addMethod("valid_date", function (value, element) {
return this.optional(element) || isValidDate(value);
}, "Please enter date with form yyyy-mm-dd");
function isValidDate(str) {
date = new Date(str);
return !(str != date.toISOString().slice(0, 10));
}
IV. Conclusion:
This Jquery plugin is easy to use but still have plenty of customiztion options. It's a good choice for developing a web's application with Ruby on Rails
All Rights Reserved