SlideShare una empresa de Scribd logo
1 de 10
By Hoàng Đăng Khánh
Client Side Validations
Framgia Study Seminar
Using Client validation?
● Validation can occur as the form elements are completed and
before the form data is submitted to the server.
● Error recovery mechanism is quite simple as it guide the user
while filling up the form and ensures the user has filled the
required fields with valid data.
● A client-side input validation check can improve application
performance by catching malformed input on the client and,
therefore, saving a round-trip to the server.
Client validation gem
● I. Features
● II. Install
● III. Usage
●I. Features
● Automatically extract and apply validation rules defined
on the server to the client.
● Validate nested fields
● Support custom validations
● Work with any ActiveModel::Validations based model
● Client side validation callbacks
● Support custom validations
● …..
II. Install
gem 'client_side_validations'
● rails g client_side_validations:install
→ config/initializers/client_side_validations.rb
initializers/client_side_validations.rb
We need to add a validate: true option to the form_for
Custom Validators
● /app/models/user.rb
→ validates :email, email_format: true
● when the email field loses the focus
→/public/javascripts/rails.validations.custom.js
Refer
● http://railscasts.com/episodes/263-client-side-validations?view=
● https://github.com/bcardarella/client_side_validations/
Thank for listening

Más contenido relacionado

Similar a Client side validations gem - KhanhHD

zaid ppt.pptx
zaid ppt.pptxzaid ppt.pptx
zaid ppt.pptx
aasim40
 
Auto inspection lot creation and Auto Usage decision for required parts
Auto inspection lot creation and Auto Usage decision for required partsAuto inspection lot creation and Auto Usage decision for required parts
Auto inspection lot creation and Auto Usage decision for required parts
Akshath L.T
 
Topic 20. Validating Requirements.pptx
Topic 20. Validating Requirements.pptxTopic 20. Validating Requirements.pptx
Topic 20. Validating Requirements.pptx
ssuserec6f52
 
Chapter5-Bypass-ClientSide-Control-Presentation.pptx
Chapter5-Bypass-ClientSide-Control-Presentation.pptxChapter5-Bypass-ClientSide-Control-Presentation.pptx
Chapter5-Bypass-ClientSide-Control-Presentation.pptx
ilhamilyas5
 
20210326 slc users monthly class
20210326   slc users monthly class20210326   slc users monthly class
20210326 slc users monthly class
CheinFattSiow
 
Pradeep Kumar _Profile
Pradeep Kumar _ProfilePradeep Kumar _Profile
Pradeep Kumar _Profile
Pradeep Kumar
 
13 lv switchboard inspection guide
13   lv switchboard inspection guide13   lv switchboard inspection guide
13 lv switchboard inspection guide
Sơn Trà
 
DEMO_Redfaire AP Automation SHORT
DEMO_Redfaire AP Automation SHORTDEMO_Redfaire AP Automation SHORT
DEMO_Redfaire AP Automation SHORT
Stuart McDonnell
 
VMC_Transaction_Monitoring_CaseStudy
VMC_Transaction_Monitoring_CaseStudyVMC_Transaction_Monitoring_CaseStudy
VMC_Transaction_Monitoring_CaseStudy
Shawn Berend
 

Similar a Client side validations gem - KhanhHD (20)

zaid ppt.pptx
zaid ppt.pptxzaid ppt.pptx
zaid ppt.pptx
 
Bypassing Validation Rules Through Automation, Aaron Crear
Bypassing Validation Rules Through Automation, Aaron CrearBypassing Validation Rules Through Automation, Aaron Crear
Bypassing Validation Rules Through Automation, Aaron Crear
 
Auto inspection lot creation and Auto Usage decision for required parts
Auto inspection lot creation and Auto Usage decision for required partsAuto inspection lot creation and Auto Usage decision for required parts
Auto inspection lot creation and Auto Usage decision for required parts
 
Web Store with Catalog and Product Management
Web Store with Catalog and Product ManagementWeb Store with Catalog and Product Management
Web Store with Catalog and Product Management
 
Quality Assurance Guidelines for Mobile App Development
Quality Assurance Guidelines for Mobile App DevelopmentQuality Assurance Guidelines for Mobile App Development
Quality Assurance Guidelines for Mobile App Development
 
Quality Assurance Guidelines
Quality Assurance GuidelinesQuality Assurance Guidelines
Quality Assurance Guidelines
 
Vj courier
Vj courier Vj courier
Vj courier
 
WSO2 API Microgateway for Easier Development and Greater Scalability
WSO2 API Microgateway for Easier Development and Greater ScalabilityWSO2 API Microgateway for Easier Development and Greater Scalability
WSO2 API Microgateway for Easier Development and Greater Scalability
 
Django Shop
Django ShopDjango Shop
Django Shop
 
Chapter 2 Calibration and Qualification.pptx
Chapter 2  Calibration and Qualification.pptxChapter 2  Calibration and Qualification.pptx
Chapter 2 Calibration and Qualification.pptx
 
Topic 20. Validating Requirements.pptx
Topic 20. Validating Requirements.pptxTopic 20. Validating Requirements.pptx
Topic 20. Validating Requirements.pptx
 
Chapter5-Bypass-ClientSide-Control-Presentation.pptx
Chapter5-Bypass-ClientSide-Control-Presentation.pptxChapter5-Bypass-ClientSide-Control-Presentation.pptx
Chapter5-Bypass-ClientSide-Control-Presentation.pptx
 
20210326 slc users monthly class
20210326   slc users monthly class20210326   slc users monthly class
20210326 slc users monthly class
 
Cafeteria Automation System
Cafeteria Automation SystemCafeteria Automation System
Cafeteria Automation System
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) Presentation
 
new resumee 111
new resumee 111new resumee 111
new resumee 111
 
Pradeep Kumar _Profile
Pradeep Kumar _ProfilePradeep Kumar _Profile
Pradeep Kumar _Profile
 
13 lv switchboard inspection guide
13   lv switchboard inspection guide13   lv switchboard inspection guide
13 lv switchboard inspection guide
 
DEMO_Redfaire AP Automation SHORT
DEMO_Redfaire AP Automation SHORTDEMO_Redfaire AP Automation SHORT
DEMO_Redfaire AP Automation SHORT
 
VMC_Transaction_Monitoring_CaseStudy
VMC_Transaction_Monitoring_CaseStudyVMC_Transaction_Monitoring_CaseStudy
VMC_Transaction_Monitoring_CaseStudy
 

Más de Framgia Vietnam

Timeless - Websocket on Rails
Timeless - Websocket on RailsTimeless - Websocket on Rails
Timeless - Websocket on Rails
Framgia Vietnam
 
CSS3 Lovers, Gather Together
CSS3 Lovers, Gather TogetherCSS3 Lovers, Gather Together
CSS3 Lovers, Gather Together
Framgia Vietnam
 
Build public private cloud using openstack
Build public private cloud using openstackBuild public private cloud using openstack
Build public private cloud using openstack
Framgia Vietnam
 
Introduction to JRuby And JRuby on Rails
Introduction to JRuby And JRuby on RailsIntroduction to JRuby And JRuby on Rails
Introduction to JRuby And JRuby on Rails
Framgia Vietnam
 
Create 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-xCreate 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-x
Framgia Vietnam
 
View, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - Thaipt
Framgia Vietnam
 
Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...
Framgia Vietnam
 
What is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNTWhat is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNT
Framgia Vietnam
 
Audited activerecord - QuanHV
Audited activerecord - QuanHVAudited activerecord - QuanHV
Audited activerecord - QuanHV
Framgia Vietnam
 
Backbone.js and rails - BanLV
Backbone.js and rails - BanLVBackbone.js and rails - BanLV
Backbone.js and rails - BanLV
Framgia Vietnam
 
Jenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh VuJenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh Vu
Framgia Vietnam
 

Más de Framgia Vietnam (20)

Functional Programming With Elixir
Functional Programming With ElixirFunctional Programming With Elixir
Functional Programming With Elixir
 
Dreamers defense
Dreamers defenseDreamers defense
Dreamers defense
 
Timeless - Websocket on Rails
Timeless - Websocket on RailsTimeless - Websocket on Rails
Timeless - Websocket on Rails
 
Game Development with Pygame
Game Development with PygameGame Development with Pygame
Game Development with Pygame
 
Racer Mice - Game Team
Racer Mice - Game TeamRacer Mice - Game Team
Racer Mice - Game Team
 
CSS3 Lovers, Gather Together
CSS3 Lovers, Gather TogetherCSS3 Lovers, Gather Together
CSS3 Lovers, Gather Together
 
Java 8 new features
Java 8 new features Java 8 new features
Java 8 new features
 
Build public private cloud using openstack
Build public private cloud using openstackBuild public private cloud using openstack
Build public private cloud using openstack
 
Introduction to JRuby And JRuby on Rails
Introduction to JRuby And JRuby on RailsIntroduction to JRuby And JRuby on Rails
Introduction to JRuby And JRuby on Rails
 
Some ways to DRY in Rails
Some ways to DRY in Rails Some ways to DRY in Rails
Some ways to DRY in Rails
 
HTML5 DRAG AND DROP
HTML5 DRAG AND DROPHTML5 DRAG AND DROP
HTML5 DRAG AND DROP
 
Create 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-xCreate 3D objects insite Cocos2d-x
Create 3D objects insite Cocos2d-x
 
View, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - Thaipt
 
Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...Organize directories for applications with front-end and back-end with yii - ...
Organize directories for applications with front-end and back-end with yii - ...
 
What is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNTWhat is new in PHP 5.5 - HuyenNT
What is new in PHP 5.5 - HuyenNT
 
An idea - NghiaLV
An idea - NghiaLVAn idea - NghiaLV
An idea - NghiaLV
 
Audited activerecord - QuanHV
Audited activerecord - QuanHVAudited activerecord - QuanHV
Audited activerecord - QuanHV
 
Delegate - KhanhLD
Delegate - KhanhLDDelegate - KhanhLD
Delegate - KhanhLD
 
Backbone.js and rails - BanLV
Backbone.js and rails - BanLVBackbone.js and rails - BanLV
Backbone.js and rails - BanLV
 
Jenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh VuJenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh Vu
 

Último

Último (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

Client side validations gem - KhanhHD