Add resetFields() and validateFieldsWithoutFeedback()

Author: tkrotoff

CHANGELOG.md

@@ -1,22 +1,40 @@
-## 0.9.3 (2018/09/12)
+## v0.10.0 (2018/09/18)
 
 ### Features
 
-- Use PropTypes.instanceOf() instead of PropTypes.object
+- `resetFields()`
+- `validateFieldsWithoutFeedback()`
+
+### Breaking Changes
+
+- `reset()` renamed to `resetFields()`
+
+### Fixes
+
+- Ignore HTML elements without `ValidityState` instead of `type`
+
+
+## v0.9.3 (2018/09/12)
+
+### Features
+
+- Use `PropTypes.instanceOf()` instead of `PropTypes.object`
 - Improve typings
 
 ### Fixes
 
-- Ignore HTML elements without type
+- Ignore HTML elements without `type`
+
 
-## 0.9.2 (2018/07/13)
+## v0.9.2 (2018/07/13)
 
 ### Features
 
 - Upgrade to Bootstrap 4.1.2
 - Add a README.md for every npm package
 
-## 0.9.1 (2018/07/06)
+
+## v0.9.1 (2018/07/06)
 
 ### Features
 
@@ -31,7 +49,8 @@
 - React Native: styling done on `FieldFeedback` with `theme` props instead of `FormWithConstraints.fieldFeedbackStyles`
 - Rename TypeScript `Input` to `InputElement`
 
-## 0.8.0 (2018/04/26)
+
+## v0.8.0 (2018/04/26)
 
 ### Features
 
@@ -52,14 +71,16 @@
 - Fix `computeFieldFeedbackKey()` implementation
 - Fix possible crash with React Native, see 03d72e1
 
-## 0.7.1 (2017/11/27)
+
+## v0.7.1 (2017/11/27)
 
 ### Fixes
 
 - Fix [CodeClimate coverage report](https://codeclimate.com/github/tkrotoff/react-form-with-constraints), see 4704370
 - Expose 'react-form-with-constraints-bootstrap4/lib/Enzyme', see c4ce710
 
-## 0.7.0 (2017/11/26)
+
+## v0.7.0 (2017/11/26)
 
 ### Features
 

README.md

@@ -38,16 +38,16 @@ Resources:
 
 - Minimal API and footprint
 - Unobtrusive: easy to adapt regular [React code](https://reactjs.org/docs/forms.html)
-- Control HTML5 error messages: `<FieldFeedback when="valueMissing">My custom error message</FieldFeedback>`
+- HTML5 error messages personalization: `<FieldFeedback when="valueMissing">My custom error message</FieldFeedback>`
 - Custom constraints: `<FieldFeedback when={value => ...}>`
 - Warnings and infos: `<FieldFeedback ... warning>`, `<FieldFeedback ... info>`
 - Async validation
 - No dependency beside React (no Redux, MobX...)
 - Re-render only what's necessary
 - Easily extendable
-- Support for [React Native](examples/ReactNative) with npm package `react-form-with-constraints-native`
 - [Bootstrap 4](examples/Bootstrap4) styling with npm package `react-form-with-constraints-bootstrap4`
 - [Material-UI](examples/MaterialUI) integration with npm package `react-form-with-constraints-material-ui`
+- Support for [React Native](examples/ReactNative) with npm package `react-form-with-constraints-native`
 - ...
 
 ```JSX
@@ -106,7 +106,7 @@ It is also inspired by [AngularJS ngMessages](https://docs.angularjs.org/api/ngM
 
 If you had to implement validation yourself, you would end up with [a global object that tracks errors for each field](examples/NoFramework/App.tsx).
 react-form-with-constraints [works similarly](packages/react-form-with-constraints/src/FieldsStore.ts).
-It uses [React context](https://github.com/reactjs/reactjs.org/blob/d59c4f9116138e419812e44b0fdb56644c498d3e/content/docs/context.md) to share the [`FieldsStore`](packages/react-form-with-constraints/src/FieldsStore.ts) object across [`FieldFeedbacks`](packages/react-form-with-constraints/src/FieldFeedbacks.tsx) and [`FieldFeedback`](packages/react-form-with-constraints/src/FieldFeedback.tsx).
+It uses [React context](https://reactjs.org/docs/legacy-context.html) to share the [`FieldsStore`](packages/react-form-with-constraints/src/FieldsStore.ts) object across [`FieldFeedbacks`](packages/react-form-with-constraints/src/FieldFeedbacks.tsx) and [`FieldFeedback`](packages/react-form-with-constraints/src/FieldFeedback.tsx).
 
 ## API
 
@@ -162,7 +162,7 @@ class MyForm extends React.Component {
     // Validates the non-dirty fields and returns Promise<Field[]>
     const fields = await this.form.validateForm();
 
-    // or simply this.form.isValid();
+    // or simply use this.form.isValid()
     const formIsValid = fields.every(field => field.isValid());
 
     if (formIsValid) console.log('The form is valid');
@@ -236,7 +236,7 @@ class MyForm extends React.Component {
   - `info?: boolean` => treats the feedback as an info
   - `children` => what to display when the constraint matches; if missing, displays the [HTML5 error message](https://www.w3.org/TR/html51/sec-forms.html#the-constraint-validation-api) if any
 
-- [`Async<T>`](packages/react-form-with-constraints/src/Async.tsx) => Async version of `FieldFeedback`, similar API as [react-promise](https://github.com/capaj/react-promise)
+- [`Async<T>`](packages/react-form-with-constraints/src/Async.tsx) => Async version of `FieldFeedback` (similar API as [react-promise](https://github.com/capaj/react-promise))
   - `promise: (value: string) => Promise<T>` => a promise you want to wait for
   - `pending?: React.ReactNode` => runs when promise is pending
   - `then?: (value: T) => React.ReactNode` => runs when promise is resolved
@@ -248,15 +248,21 @@ class MyForm extends React.Component {
     Should be called when a `field` changes, will re-render the proper `FieldFeedback`s (and update the internal `FieldsStore`).
     Without arguments, all fields (`$('[name]')`) are validated.
 
+  - `validateFieldsWithoutFeedback(...inputsOrNames: Array<Input | string>): Promise<Field[]>` =>
+    Validates only all non-dirty fields (won't re-validate fields that have been already validated with `validateFields()`),
+    If you want to force re-validate all fields, use `validateFields()`.
+
   - `validateForm(): Promise<Field[]>` =>
-    Should be called before to submit the `form`. Validates only all non-dirty fields (won't re-validate fields that have been already validated with `validateFields(...)`),
-    If you want to force re-validate all fields, use `validateFields()` without arguments.
+    Other name for `validateFieldsWithoutFeedback()`, typically called before to submit the `form`.
+    Might be removed in the future?
 
-  - `isValid(): boolean` => should be called after `validateForm()` or `validateFields()`, tells if the fields are valid
+  - `isValid(): boolean` => should be called after `validateFields()`, `validateFieldsWithoutFeedback()` or `validateForm()`, tells if the fields are valid
 
   - `hasFeedbacks(): boolean` => tells if the fields have any kind of feedback
 
-  - `reset(): Promise` => resets internal `FieldsStore` and re-render all `FieldFeedback`s
+  - `resetFields(...inputsOrNames: Array<Input | string>): Promise<Field[]>` =>
+    Resets the given fields and re-render the proper `FieldFeedback`s.
+    Without arguments, all fields (`$('[name]')`) are reset.
 
   - [`Field`](packages/react-form-with-constraints/src/Field.ts) =>
     ```TypeScript
@@ -281,7 +287,10 @@ class MyForm extends React.Component {
 
 ## Browser support
 
-You can use HTML5 attributes like `type="email"`, `required`, `pattern`..., in this case a [recent browser](http://caniuse.com/#feat=forms) is needed,...
+react-form-with-constraints needs [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) which is supported by all modern browsers and IE >= 10.
+It also needs a polyfill such as [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/usage/polyfill/) to support IE <= 11, see [React JavaScript Environment Requirements](https://reactjs.org/docs/javascript-environment-requirements.html).
+
+You can use HTML5 attributes like `type="email"`, `required`, [`minlength`](https://caniuse.com/#feat=input-minlength)...
 
 ```JSX
 <label htmlFor="username">Username</label>
@@ -293,7 +302,7 @@ You can use HTML5 attributes like `type="email"`, `required`, `pattern`..., in t
 </FieldFeedbacks>
 ```
 
-...or ignore them and rely on `when` functions:
+...and/or rely on `when` functions:
 
 ```JSX
 <label htmlFor="username">Username</label>
@@ -307,8 +316,6 @@ You can use HTML5 attributes like `type="email"`, `required`, `pattern`..., in t
 
 In the last case you will have to manage translations yourself (see SignUp example).
 
-react-form-with-constraints needs a polyfill such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) to support IE 11 and lower. See also [React JavaScript Environment Requirements](https://reactjs.org/docs/javascript-environment-requirements.html).
-
 ## Notes
 
 - A [`type="hidden"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Validation), [`readonly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) or [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-disabled) input won't trigger any HTML5 form constraint validation like [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required), see https://codepen.io/tkrotoff/pen/gdjVNv

examples/Bootstrap4/App.jsx

@@ -84,7 +84,7 @@ class Form extends React.Component {
 
   handleReset = () => {
     this.setState(this.getInitialState());
-    this.form.reset();
+    this.form.resetFields();
     this.setState({resetButtonDisabled: true});
   }
 

examples/MaterialUI/App.tsx

@@ -120,7 +120,7 @@ class Form extends React.Component<PropsWithStyles, State> {
 
   handleReset = () => {
     this.setState(this.getInitialState());
-    this.form!.reset();
+    this.form!.resetFields();
     this.setState({resetButtonDisabled: true});
   }
 

examples/MaterialUI/package.json

@@ -18,7 +18,7 @@
 
     "lodash": "latest",
 
-    "@material-ui/core": "latest",
+    "@material-ui/core": "~3.0.3",
 
     "react-form-with-constraints": "^0.9.3",
     "react-form-with-constraints-material-ui": "^0.9.3",

examples/Password/App.tsx

@@ -101,7 +101,7 @@ class Form extends React.Component<Props, State> {
     // Validates the non-dirty fields and returns the related FieldValidation structures
     const fields = await this.form!.validateForm();
 
-    // or simply this.form.isValid();
+    // or simply use this.form.isValid()
     const formIsValid = fields.every(field => field.isValid());
 
     if (formIsValid) console.log('The form is valid');

examples/ReactNative/App.tsx

@@ -109,7 +109,7 @@ export default class App extends React.Component<Props, State> {
 
   handleReset = () => {
     this.setState(this.getInitialState());
-    this.form!.reset();
+    this.form!.resetFields();
     this.setState({resetButtonDisabled: true});
   }
 

examples/ServerSideRendering/App.tsx

@@ -99,7 +99,7 @@ class Form extends React.Component<Props, State> {
     // Validates the non-dirty fields and returns the related FieldValidation structures
     const fields = await this.form!.validateForm();
 
-    // or simply this.form.isValid();
+    // or simply use this.form.isValid()
     const formIsValid = fields.every(field => field.isValid());
 
     if (formIsValid) console.log('The form is valid');