calidation - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/Form.js

@@ -154,5 +154,5 @@ 'use strict';
                 fields: this.state.fields,
+                register: this.registerSubComponent,
+                setField: this.setField,
                 submitted: this.state.submitted,
-                setField: this.setField,
-                register: this.registerSubComponent,
                 unregister: this.unregisterSubComponent
@@ -159,0 +159,0 @@ };

dist/Validation.js

@@ -74,3 +74,4 @@ 'use strict';
                 children = _props.children,
-                config = _props.config;
+                config = _props.config,
+                setField = _props.setField;
 
@@ -81,3 +82,4 @@
                 fields: this.getFieldValues(),
-                submitted: submitted
+                submitted: submitted,
+                setField: setField
             };
@@ -84,0 +86,0 @@

package.json

 {
   "name": "calidation",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A red hot validation library for React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -24,18 +24,9 @@ # calidation
 
-### Configurate, don't playa hate
+### Step 1: Specify your fields
 
 First, you specify a config object that specifies the names of the fields you
-want to validate:
+want to validate, and the validators to apply to each field.
 
 ```js
-const config = {
-    username: {},
-    password: {},
-},
-```
-
-What about those empty objects? Those are for you to specify the validators in!
-
-```js
-const config = {
+const formConfig = {
     username: {
@@ -47,3 +38,3 @@ isRequired: 'Username is required!',
         isMinLength: {
-            message: 'Password must be 8 characters or longer',
+            message: 'Password must at least be 8 characters long',
             length: 8,
@@ -55,3 +46,8 @@ },
 
-Here, the key is the name of the validator, and the value is the error message.
+In this config, we validate two fields - `username` and `password`. These keys
+are matched with your `<input name />` property. Each matching object is a list
+of validators.
+
+Here, the key is the name of the validator, and the value is either the error
+message as a string, or an object with a simple validation configuration.
 You can add as many validators as you want, and they'll be run from top to
@@ -369,2 +365,125 @@ bottom. For more about validators, go to the [validators](#validators) section!
 
+## API
+
+### `FormValidation`
+
+`import { FormValidation } from 'calidators';`
+
+When you have a simple form to validate.
+
+#### Props
+
+##### `children: func.isRequired`
+
+The `children` function is called with an object with the following props:
+
+```js
+{
+    errors: object, // object with the same keys as `fields`, but with error messages
+    fields: object, // object with the form field values, to make controlled components
+    setField: func, // callback accepting a diff object, updating fields like setState
+    submitted: bool, // flag showing whether the form has been submitted once or not
+}
+```
+
+The `setField` function is used whenever you want to update a field outside of
+a typical `change` event. Pass an object with the diff you want to apply (like
+React's `setState`), and it will update and reevaluate your form.
+
+##### `config: object.isRequired`
+
+The config object specifies what you want to validate, and which validators to
+apply to it.
+
+Each validator can accept an object with a `message` key or - in the case where
+you don't have to specify anything other than a validation message - just a
+string with the error message.
+
+##### `initialValues: object`
+
+The `initialValues` object lets you specify the initial values of the form
+fields. These values are available from the `fields` argument in the `children`
+function, which lets you control your form fields.
+
+##### `onSubmit: func`
+
+This callback is fired whenever the form is submitted. That can happen whenever
+somebody clicks the submit button, or hits `enter` in the form.
+
+The `onSubmit` function is called with an object with the following props:
+
+```js
+{
+    errors: object, // Object with all error messages, keyed per field
+    fields: object, // Object with all field inputs, keyed per field
+    isValid: bool, // Boolean indicating whether your form is valid or not
+}
+```
+
+### `Form`
+
+`import { Form } from 'calidators';`
+
+When you want to wrap a complex form (in conjunction )
+
+#### Props
+
+##### `onSubmit: func`
+
+This callback is fired whenever the form is submitted. That can happen whenever
+somebody clicks the submit button, or hits `enter` in the form.
+
+The `onSubmit` function is called with an object with the following props:
+
+```js
+{
+    errors: object, // Object with all error messages, keyed per field
+    fields: object, // Object with all field inputs, keyed per field
+    isValid: bool, // Boolean indicating whether your form is valid or not
+}
+```
+
+### `Validation`
+
+`import { Validation } from 'calidators';`
+
+When you want to wrap a sub-set of your form in validation logic (in conjunction
+with the `Form` tag)
+
+#### Props
+
+##### `config: object.isRequired`
+
+The config object specifies what you want to validate, and which validators to
+apply to it.
+
+Each validator can accept an object with a `message` key or - in the case where
+you don't have to specify anything other than a validation message - just a
+string with the error message.
+
+### `ValidatorsProvider`
+
+`import { ValidatorsProvider } from 'calidators';`
+
+When you want to provide your application with a few more validators. Wrap your
+app with this at the top level.
+
+#### Props
+
+##### `validators`
+
+An object with functions according to the
+[validators](https://github.com/selbekk/calidators) spec. TL;DR: A function that
+returns a function that returns a function that decides whether or not your
+input if fair. Relax - here's an example:
+
+```js
+const validators = {
+    isBadTaste = config => value => value === 'Justin Bieber',
+};
+<ValidatorsProvider validators={validators}>
+    {...}
+</ValidatorsProvider>
+```
+
 ## Want to contribute?
@@ -371,0 +490,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37144

increased by11.44%

Lines of code

390

increased by0.52%

Number of lines in readme file

489

increased by32.16%

No dependency changes