• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

Validation of complex forms React. Part 1

 
3r3-31. First you need to install the 3r3r6646 component. react-validation-boo [/b] , I assume that you are familiar with react and know how to configure. 3r3885.  
3r3885.  
npm install react-validation-boo 3r3885.  
3r3885.  
In order not to talk a lot, I will immediately give you a small sample code. 3r3885.  
3r3885.  
3r3653. import React, {Component} from 'react';
import {connect, Form, Input, logger} from 'react-validation-boo';
class MyForm extends Component {
sendForm = (event) => {
event.preventDefault ();
if (this.props.vBoo.isValid ()) {
console.log ('Get the values ​​entered and send them to the server', this.props.vBoo.getValues ​​());
} else {
console.log ('We will output errors to the console', this.props.vBoo.getErrors ());
}
};
getError = (name) => {
return this.props.vBoo.hasError (name)?
{this.props.vBoo.getError (name)}
: '';
};
render () {
return
3r33824.
3r3752.
{this.getError ('name')}
3r33894.
3r33836.
{this.props.vBoo.isValid ()? 'You can send': 'Be careful !!!'}
3r33838.
3r33841.
}
}
export default connect ({
rules: () => (3r33898.[
['name', 'required'],
]
),
middleware: logger
}) (MyForm);
3r3883. 3r3884. 3r3885.  
3r3885.  
Let's break this code down. 3r3885.  
3r3885.  
Let's start with the function 3r3646. connect [/b] , we pass our validation rules and other advanced parameters to it. By calling this method we get a new function in which we transfer our component ( MyForm ), So that it will receive in props necessary methods of work with the validation of forms. 3r3885.  
3r3885.  
In function 3r3646. render [/b] of our component, we return the component Form which we connect with the rules of validation connect = {this.props.connect} . This necessary design to Form knew how to validate nested components. 3r3885.  
3r3-300. The input field that we will check, we have passed the validation rules to connect in property 3r3646. rules [/b] . In our case, this is name must not be empty ( required ). 3r3885.  
3r3885.  
We are also in 3r3646. connect [/b] handed over 3r3646. middleware: logger [/b] in order to see the validation in the console. 3r3885.  
3r3885.  
In 3r3646. props [/b] of our component, we got a set of functions: 3r3r885.  
3r3885.  
3r3-3598.  
3r3612. vBoo.isValid () - returns 3r3r6646. true [/b] if all input components have been validated 3r3-3617.  
3r3612. vBoo.hasError (name) - returns 3r3r6646. true [/b] if the component with property name not validin
 
3r3612. vBoo.getError (name) - for the component with property name It returns the text of the error 3r31717.  
3r3619. 3r3885.  
Now we will gradually complicate, for a start in 3r3r6646. connect [/b] let's pass the language in order to be able to change the validation rules depending on the language, and also add additional fields and validation rules. 3r3885.  
3r3885.  
3r3653. import React, {Component} from 'react';
import {connect, Form, Input, InputCheckbox} from 'react-validation-boo';
class MyForm extends Component {
sendForm = (event) => {
event.preventDefault ();
if (this.props.vBoo.isValid ()) {
console.log ('Get the values ​​entered and send them to the server', this.props.vBoo.getValues ​​());
} else {
console.log ('We will output errors to the console', this.props.vBoo.getErrors ());
}
};
getError = (name) => {
return this.props.vBoo.hasError (name)?
{this.props.vBoo.getError (name)}
: '';
};
render () {
return
3r33824.
{this.props.vBoo.getLabel ('name')}:
3r3752.
{this.getError ('name')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('email')}:
3r33762.
{this.getError ('email')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('remember')}:
3r33418.
{this.getError ('remember')}
3r33894.
3r33836.
{this.props.vBoo.isValid ()? 'You can send': 'Be careful !!!'}
3r33838.
3r33841.
}
}
export default connect ({
rules: (lang) => {
let rules =[
[
['name', 'email'],
'required',
{3rr3898. error: '% name% should not be empty'
}
], 3r33898. W2w2w227.
]; 3-333898. 3r3-33898. Rules.push (['remember', lang === 'ru' ? 'required': 'valid']);
Return rules;
}, 3r33898.
Email: 'Email',
Remember: 'Remember'
}),
Lang: 'en'
}) (MyForm);
3r3883. 3r3884. 3r3885.  
In this example, the checkbox is remember 3r3r664 must be installed in Russian. required [/b] , and on others it is always valid valid . 3r3885.  
3r3885.  
We also referred to 3r3646. connect [/b] function 3r3r6646. labels (lang) [/b] which returns the name of the fields in a readable form. 3r3885.  
3r3885.  
In 3r3646. props [/b] your component, there is a function getLabel (name) which returns the value passed by the function 3r3646. labels [/b] or if there is no such value, it returns name . 3r3885.  
3r3885.  
3r33545. The basic components of vBoo
3r3885.  
Form , Input , InputRadio , InputCheckbox , Select , Textarea . 3r3885.  
3r3885.  
3r3653. import React, {Component} from 'react';
import {connect, Form, Input, Select, InputRadio, InputCheckbox, Textarea} from 'react-validation-boo';
class MyForm extends Component {
sendForm = (event) => {
event.preventDefault ();
if (this.props.vBoo.isValid ()) {
console.log ('Get the values ​​entered and send them to the server', this.props.vBoo.getValues ​​());
} else {
console.log ('We will output errors to the console', this.props.vBoo.getErrors ());
}
};
getError = (name) => {
return this.props.vBoo.hasError (name)?
{this.props.vBoo.getError (name)}
: '';
};
render () {
return
3r33824.
{this.props.vBoo.getLabel ('name')}:
3r3752.
{this.getError ('name')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('email')}:
3r33762.
{this.getError ('email')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('gender')}:
3r3772.
3r3774. Your floor
3r3r7777. Male
3r33780. Women's
{this.getError ('gender')}
3r33894.
3r33824.
3r33824. {this.props.vBoo.getLabel ('familyStatus')}:
3r33824.
single 3r3827.
3r33894.
3r33824.
3r33383.
cohabitation
3r33894.
3r33824.
marriage
3r33894.
{this.getError ('familyStatus')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('comment')}:
3r33737. 3r33737.
{this.getError ('comment')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('remember')}:
3r33418.
{this.getError ('remember')}
3r33894.
3r33836.
{this.props.vBoo.isValid ()? 'You can send': 'Be careful !!!'}
3r33838.
3r33841.
}
}
export default connect ({
rules: () => ([
[
['name', 'email'],
'required',
{3rr3898. error: '% name% should not be empty'
} 3r33898.],
['email', 'email']} ,
W2w2w26., 'Valid']
]),
Labels: () => ({
Name: 'Name',
Email: 'E-mail', 3r33898. Gender: 'Sex',
familyStatus: 'Marital status',
comment: 'Comment',
remember: 'remember'
}), 3r3r9898. lang: 'en'
}) (MyForm);
3r3883. 3r3884. 3r3885.  
3r33545. Validation Rules 3r33546. 3r3885.  
Let's take a look at how to write your own validation rules. 3r3885.  
In order to write a rule you need to create a class that will be inherited from the class validator . 3r3885.  
3r3885.  
3r3653. import {validator} from 'react-validation-boo';
class myValidator extends validator {
/3r3r9898. * name - the name of the field, if there is a label, then it will be passed to
* value - the current value of the field
* params - parameters that were passed by the 3rd argument to the validation rules (rules)
* /
validate (name, value, params) {
let lang = this.getLang ();
let pattern = /^ d + $ /;
if (! pattern.test (value)) {
let error = params.error || 'Error for field% name% with value% value%';
error = error.replace ('% name%', name);
error = error.replace ('% value%', value);
this.addError (error);
}
}
}
export default myValidator;
3r3883. 3r3884. 3r3885.  
Now we connect our validator to the form. 3r3885.  
3r3653. import myValidator from 'path /myValidator';
//3r39898.
export default connect ({
rules: () => ([
[
'name',
'required',
{
error: '%name% не должно быть пустым'
}
],
[
'name',
'myValidator',
{
error: 'это и будет params.error'
}
]
]),
labels: () => ({
name: 'Name'
}),
validators: {
myValidator
},
lang: 'en'
}) (MyForm);
3r3883. 3r3884. 3r3885.  
In order not to prescribe all your validation rules every time, we create a separate file where they will be registered and connect it to 3r3r6646. validators: `import 'file-validation'` [/b] . And if there are any special rules for this form, then validators: Object.assign ({}, `import 'file-validation'`, {}) 3r3885.  
3r3885.  
3r33545. Scenarios 3r33546. 3r3885.  
Consider cases when we need to change the validation rules depending on the actions performed on the form. 3r3885.  
3r3885.  
By default, we have a script called default , in the rules we can prescribe under what scenario to conduct this validation. 3r3885.  
3r3885.  
If the script is not specified, then validation will be performed for all scripts. 3r3885.  
3r3885.  
3r3653. rules = () => ([
[
'name',
'required',
{
error: '%name% не должно быть пустым'
}
], 3r3-39898.[
'name',
'myValidator',
{
scenario:['default', 'scenario1']
}
], 3r3-39898.[
'email',
'email',
{
scenario: 'scenario1'
}
]3r39898.]) 3r3-39898. 3r3883. 3r3884. 3r3885.  
Through property 3r3646. props [/b] our component passed functions:
 
3r3885.  
3r3-3598.  
3r3612. vBoo.setScenario (scenario) - installs the script. scenario 3r3r7647. maybe both a string and an array, if we have several
scripts active at once.  
3r3612. vBoo.getScenario () - returns the current script or array of scripts
 
3r3612. vBoo.hasScenario (name) - shows whether this script is currently installed, name line
 
3r3619. 3r3885.  
Let's add an object in our form. scenaries in which we will store all possible scenarios, true script active, 3r3r6646. false
not. 3r3885.  
3r3885.  
As well as features 3r3646. addScenaries [/b] and 3r3646. deleteScenaries [/b] that will add and delete scripts. 3r3885.  
3r3885.  
If we have a “marital status” selected “cohabitation” or “marriage”, then we add a comment field and of course this field should be validated only in this case, the script ' scenario-married '. 3r3885.  
3r3885.  
If the “Advanced” checkbox is set for us, then we add additional fields that will become mandatory, the script ' scenario-addition '. 3r3885.  
3r3885.  
3r3653. import React, {Component} from 'react';
import {connect, Form, Input, Select, InputRadio, InputCheckbox, Textarea} from 'react-validation-boo';
class MyForm extends Component {
constructor () {
super ();
this.scenaries = {
'scenario-married': false,
'scenario-addition': false
}
}
changeScenaries (addScenaries =[], deleteScenaries =[]) {
addScenaries.forEach (item => this.scenaries[item]= true);
deleteScenaries.forEach (item => this.scenaries[item]= false);
let scenario = Object.keys (this.scenaries)
.reduce ((result, item) => this.scenaries[item]? result.concat (item): result,[]);
this.props.vBoo.setScenario (scenario);
}
addScenaries = (m =[]) => this.changeScenaries (m,[]);
deleteScenaries = (m =[]) => this.changeScenaries ([], m);
sendForm = (event) => {
event.preventDefault ();
if (this.props.vBoo.isValid ()) {
console.log ('Get the values ​​entered and send them to the server', this.props.vBoo.getValues ​​());
} else {
console.log ('We will output errors to the console', this.props.vBoo.getErrors ());
}
};
getError = (name) => {
return this.props.vBoo.hasError (name)?
{this.props.vBoo.getError (name)}
: '';
};
changeFamilyStatus = (event) => {
let val = event.target.value;
if (val! == '1') {3r33898. this.addScenaries (['scenario-married'])
} else {
this.deleteScenaries (['scenario-married']);
}
};
changeAddition = (event) => {3r33898. let check = event.target.checked;
if (check) {
this.addScenaries (['scenario-addition'])
} else {
this.deleteScenaries (['scenario-addition']);
}
};
getCommentContent () {
if (this.props.vBoo.hasScenario ('scenario-married')) {
return (
{this.sect .)
}
return '';
}
getAdditionContent () {
if (this.props.vBoo.hasScenario ('scenario-addition')) {
return (
3r3826. {this. 3) 3r???. ;
}
return '';
}
render () {
return
3r33824.
{this.props.vBoo.getLabel ('name')}:
3r3752.
{this.getError ('name')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('email')}:
3r33762.
{this.getError ('email')}
3r33894.
3r33824.
{this.props.vBoo.getLabel ('gender')}:
3r3772.
3r3774. Your floor
3r3r7777. Male
3r33780. Women's
{this.getError ('gender')}
3r33894.
3r33824.
3r33824. {this.props.vBoo.getLabel ('familyStatus')}:
3r33824.
3r33795.
single 3r3827.
3r33894.
3r33824.
3r3804.
cohabitation
3r33894.
3r33824.
marriage
3r33894.
{this.getError ('familyStatus')}
3r33894.
{this.getCommentContent ()}
3r33824.
{this.props.vBoo.getLabel ('addition')}:
{this.getError ('addition')}
3r33894.
{this.getAdditionContent ()}
3r33836.
{this.props.vBoo.isValid ()? 'You can send': 'Be careful !!!'}
3r33838.
3r33841.
}
}
export default connect ({
rules: () => ([
[
['name', 'gender', 'familyStatus', 'email'],
'required',
{3rr3898. error: '% name% should not be empty'
}
],
['email', 'email']} 3r39898.], 3rr3898.['email', 'email']} , 3r3r9898. W2w2w228.,
W2w2w229.,
W2w2w230.,
]), 3rr3898. Labels: () => ({
Name: 'Name', 3) gender: 'Sex',
familyStatus: 'Marital status',
comment: 'Comment',
addition: 'Extras',
place: 'Location'
}),
lang: 'en'
}) (MyForm);
3r3883. 3r3884. 3r3885.  
In order not to make the article very large, I will continue in the next one, where I will write how to create my components (for examplemeasure calendar or inputSearch) and validate them, how to associate with redux and more. 3r33894.
3r33891. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r33892.
3r33894.

It may be interesting

  • Comments
  • About article
  • Similar news
This publication has no comments.

weber

Author

19-11-2018, 08:12

Publication Date

Development / ReactJS

Category
  • Comments: 0
  • Views: 282
Validation of React Forms. Part 2
Approach to RBAC implementation in
Using the connect () function from the
The solution to the absence of
Re: "Comparison of JS-frameworks:
Using the render props template outside
Write a comment
Name:*
E-Mail:


Comments
Call girls are available from Chennai Escort Agency. Meet sexy escorts in Chennai for incalls and outcalls throughout the city,  Visit us www.chennai-escort.com/
Today, 13:21

Chennai Escorts

Particular interviews furnish firsthand message on mart size, industry trends, ontogeny trends, capitalist landscape and outlook, etc.먹튀검증사이트

Today, 11:33

raymond weber

This was a shocking post. It has some look at here fundamental data on this subject.먹튀

Today, 11:00

raymond weber

I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. I also found your posts very interesting. In fact after reading. I had to go show it to my friend and he ejoyed it as well!먹튀검증

Today, 09:13

raymond weber

I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. I also found your posts very interesting. In fact after reading. I had to go show it to my friend and he ejoyed it as well!메이저사이트

Today, 09:02

raymond weber

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password