validation using jquery-validation-rails gem in rails
Total Blog Views: 114
Blog Status: publish
Created By: asad_fazlani Created at: 08-23-2021
What is Validation?
Validation is used to store valid data in database.JavaScript provides the facility to validate the form on the client-side so data processing will be faster than server-side validation. In rails app this is more simple with jquery-validation-rails.
Installation:
Add jquery-validation-rails gem in gemfile
gem "jquery-validation-rails"
install gem using bundle
Add given below code in application.js
//= require jquery.validate //= require jquery.validate.additional-method
previously we add device gem which created sign in login form click here for more
or create any form.
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>
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: {
"user[username]":{
required: "Username is required.",
maxlength: "Username must be less than 20",
minlength: "Username must be more than 6"
},
"user[email]":{
required: "Email is required",
email: "Please enter a valid email address"
},
"user[password]": {
required: "Password is required"
},
"user[password_confirmation]": {
required: "Password confirmation is required",
equalTo: "Password and password confirmation must be same"
}
}
})
for changing error message color add css
errorPlacement: function (error, element) {
error.insertBefore(element).css('color','red');
},
bellow code is use for show error messege above the input
error.insertBefore(element).css('color','red');
bellow code is use for show error messege below the input
error.inserAfter(element).css('color','red');
Rate Blog :
Share on :
Do you have any blog suggestion? please click on the link