Gathering detailed insights and metrics for react-validatorjs-strategy
Gathering detailed insights and metrics for react-validatorjs-strategy
Gathering detailed insights and metrics for react-validatorjs-strategy
Gathering detailed insights and metrics for react-validatorjs-strategy
npm install react-validatorjs-strategy
Typescript
Module System
Min. Node Version
Node Version
NPM Version
63.4
Supply Chain
98.8
Quality
75.7
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
223,081
Last Day
5
Last Week
214
Last Month
1,744
Last Year
24,584
10 Stars
41 Commits
5 Forks
3 Watching
2 Branches
4 Contributors
Minified
Minified + Gzipped
Latest Version
0.2.1
Package Id
react-validatorjs-strategy@0.2.1
Size
6.73 kB
NPM Version
3.10.9
Node Version
7.2.0
Cumulative downloads
Total Downloads
Last day
-96.2%
5
Compared to previous day
Last week
-42.3%
214
Compared to previous week
Last month
-1.9%
1,744
Compared to previous month
Last year
13.4%
24,584
Compared to previous year
1
Strategy for using validatorjs with react-validation-mixin.
The strategy interface for react-validation-mixin
is defined here and that is what this library implements as an interface for validatorjs.
First follow the instructions to install validatorjs (tested with version 3.9) and then download dist/strategy.min.js
and include via a script tag:
1<script src="dist/strategy.min.js" type="text/javascript"></script>
Or you can install with bower:
bower install react-validatorjs-strategy
Requires at least Node 4.0.0.
On the command line type:
npm install react-validatorjs-strategy
Then in your JavaScript file:
1var strategy = require('react-validatorjs-strategy')
This also works if you're using webpack
or browserify
to compile your React components.
A working example containing the below can be found at https://github.com/TheChech/react-tutorial.
react-validation-mixin
requires a component to be validated to have this.validatorTypes
defined. To create this, call strategy.createSchema
either in the constructor if you're using classes, or in a function which is run very early, such as getInitialState
. This method takes one required parameter and two optional ones:
1this.validatorTypes = strategy.createSchema( 2 // First parameter is a list of rules for each element name 3 { 4 name: 'required', 5 email: 'required|email', 6 age: 'min:18' 7 }, 8 // Second parameter is optional and is a list of custom error messages for elements 9 { 10 "required.email": "Without an :attribute we can't reach you!" 11 } 12 // Third parameter is also optional; a callback that takes the validator instance created 13 // and can be used to call methods on it. This is run at the point of validation. 14 function (validator) { 15 validator.lang = 'ru'; 16 } 17);
To call the validation on for example a form submission:
1handleSubmit = function (e) { 2 e.preventDefault(); 3 4 this.props.validate(function (error) { 5 if (!error) { 6 // Submit the data 7 } 8 }); 9},
The use of this strategy makes no difference to how the validation is handled in the render method, but just for the sake of completeness, triggering the validation on blur and then rendering any validation messages under the element:
1<input 2 name='name' 3 type='text' 4 placeholder='Your name' 5 onBlur={this.props.handleValidation('name')} 6/> 7 8{this.props.getValidationMessages('name')}
Then after the component is defined:
1Component = validation(strategy)(Component);
I prefer to validate on the change event of an input to get immediate feedback. However, this has a problem. If for example, you're validating for an email address, as soon as the user enters one character the field will be flagged up as invalid, even though they've not yet had a chance to enter valid data. What ideally should happen is that the field is not validated for the first time until it is blurred out and from then on, any change should be validated immediately.
To achieve this, there is another way of creating validation schemas; createInactiveSchema
. This is called in exactly the same way, but all rules are turned off by default until activateRule
is enabled, which should be called with onBlur
.
An example:
1this.validatorTypes = strategy.createInactiveSchema(...);
Then the events bound to the element have to be changed slightly:
1<input 2 type="text" 3 placeholder="Your name" 4 name="name" 5 value={this.state.name} 6 onBlur={this.activateValidation} 7 onChange={this.handleChange} 8/>
These methods have to be created in the component:
1/** 2 * Activate the validation rule for the element on blur 3 * 4 * @param {Event} e 5 */ 6activateValidation(e) { 7 strategy.activateRule(this.validatorTypes, e.target.name); 8 this.props.handleValidation(e.target.name)(e); 9}, 10/** 11 * Set the state of the changed variable and then when set, call validator 12 * 13 * @param {Event} e 14 */ 15handleChange(e) { 16 var state = {}; 17 state[e.target.name] = e.target.value; 18 19 this.setState(state, () => { 20 this.props.handleValidation(e.target.name)(e); 21 }); 22},
Submitting the whole form (when this.props.validate
is called) works the same way; it automatically activates all rules.
The Validator, accessible through the 3rd parameter of strategy.createSchema, enables registering custom validations.
1this.validatorTypes = strategy.createInactiveSchema({ 2 username: 'required|usernameAvailable', 3}, { 4 5 }, function(validator) { 6 validator.constructor.registerAsync('usernameAvailable', function(username, attribute, req, passes) { 7 // do your database/api checks here etc 8 // then call the `passes` method where appropriate: 9 passes(); // if username is available 10 passes(false, 'Username has already been taken.'); 11 }); 12}
The validation can also be used isomorphically both in the browser in React components and on the server. This is done by creating the schema in the same way and then calling validateServer
which returns a promise; the rejection of which can be handled by an error handler. Because the rejection returns an instance of strategy.Error
it can be easily identified.
As an example in Express:
1app.post('/contact', function (req, res, next) { 2 var schema = strategy.createSchema(...); 3 4 strategy.validateServer(req.body, schema).then(function () { 5 // Submit the data 6 }) 7 .catch(next); 8} 9 10/** 11 * If a validation error, output a 400 JSON response containing the error messages. 12 * Otherwise, use the default error handler. 13 */ 14app.use(function (err, req, res, next) { 15 if (err instanceof strategy.Error) { 16 res.status(400).json(err.errors); 17 } else { 18 next(err, req, res); 19 } 20});
Using this method also activates all rules if createInactiveSchema
was used.
Simply clone the repository, run npm install
and then run npm test
. The tests are in tests/strategySpec.js
.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
Found 3/21 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-12-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More