SlideShare uma empresa 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

Mais conteúdo relacionado

Semelhante a Client side validations gem - KhanhHD

zaid ppt.pptx
zaid ppt.pptxzaid ppt.pptx
zaid ppt.pptxaasim40
 
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 CrearCzechDreamin
 
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 partsAkshath L.T
 
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 ManagementMike Taylor
 
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 DevelopmentMoqod
 
Quality Assurance Guidelines
Quality Assurance GuidelinesQuality Assurance Guidelines
Quality Assurance GuidelinesTim Stribos
 
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 ScalabilityWSO2
 
Chapter 2 Calibration and Qualification.pptx
Chapter 2  Calibration and Qualification.pptxChapter 2  Calibration and Qualification.pptx
Chapter 2 Calibration and Qualification.pptxShrikantKavitake1
 
Topic 20. Validating Requirements.pptx
Topic 20. Validating Requirements.pptxTopic 20. Validating Requirements.pptx
Topic 20. Validating Requirements.pptxssuserec6f52
 
Chapter5-Bypass-ClientSide-Control-Presentation.pptx
Chapter5-Bypass-ClientSide-Control-Presentation.pptxChapter5-Bypass-ClientSide-Control-Presentation.pptx
Chapter5-Bypass-ClientSide-Control-Presentation.pptxilhamilyas5
 
20210326 slc users monthly class
20210326   slc users monthly class20210326   slc users monthly class
20210326 slc users monthly classCheinFattSiow
 
Cafeteria Automation System
Cafeteria Automation SystemCafeteria Automation System
Cafeteria Automation SystemIRJET Journal
 
AngularJs (1.x) Presentation
AngularJs (1.x) PresentationAngularJs (1.x) Presentation
AngularJs (1.x) PresentationRaghubir Singh
 
Pradeep Kumar _Profile
Pradeep Kumar _ProfilePradeep Kumar _Profile
Pradeep Kumar _ProfilePradeep Kumar
 
13 lv switchboard inspection guide
13   lv switchboard inspection guide13   lv switchboard inspection guide
13 lv switchboard inspection guideSơn Trà
 
DEMO_Redfaire AP Automation SHORT
DEMO_Redfaire AP Automation SHORTDEMO_Redfaire AP Automation SHORT
DEMO_Redfaire AP Automation SHORTStuart McDonnell
 
VMC_Transaction_Monitoring_CaseStudy
VMC_Transaction_Monitoring_CaseStudyVMC_Transaction_Monitoring_CaseStudy
VMC_Transaction_Monitoring_CaseStudyShawn Berend
 

Semelhante 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
 

Mais de Framgia Vietnam

Functional Programming With Elixir
Functional Programming With ElixirFunctional Programming With Elixir
Functional Programming With ElixirFramgia Vietnam
 
Timeless - Websocket on Rails
Timeless - Websocket on RailsTimeless - Websocket on Rails
Timeless - Websocket on RailsFramgia Vietnam
 
Game Development with Pygame
Game Development with PygameGame Development with Pygame
Game Development with PygameFramgia Vietnam
 
CSS3 Lovers, Gather Together
CSS3 Lovers, Gather TogetherCSS3 Lovers, Gather Together
CSS3 Lovers, Gather TogetherFramgia Vietnam
 
Build public private cloud using openstack
Build public private cloud using openstackBuild public private cloud using openstack
Build public private cloud using openstackFramgia 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 RailsFramgia Vietnam
 
Some ways to DRY in Rails
Some ways to DRY in Rails Some ways to DRY in Rails
Some ways to DRY in 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-xFramgia 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 - ThaiptFramgia 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 - HuyenNTFramgia Vietnam
 
Audited activerecord - QuanHV
Audited activerecord - QuanHVAudited activerecord - QuanHV
Audited activerecord - QuanHVFramgia Vietnam
 
Backbone.js and rails - BanLV
Backbone.js and rails - BanLVBackbone.js and rails - BanLV
Backbone.js and rails - BanLVFramgia 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 VuFramgia Vietnam
 

Mais 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

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
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 Processorsdebabhi2
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
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 connectorsNanddeep Nachan
 
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...DianaGray10
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
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.pdfsudhanshuwaghmare1
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 

Último (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
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
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
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...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

Client side validations gem - KhanhHD