Pre-release prep for formOptions.validateOnBlur (#115)

Author: wsmd

README.md

@@ -48,6 +48,7 @@
     - [`formOptions.onTouched`](#formoptionsontouched)
     - [`formOptions.onClear`](#formoptionsonclear)
     - [`formOptions.onReset`](#formoptionsonreset)
+    - [`formOptions.validateOnBlur`](#formoptionsvalidateonblur)
     - [`formOptions.withIds`](#formoptionswithids)
   - [`[formState, inputs]`](#formstate-inputs)
     - [Form State](#form-state)
@@ -552,6 +553,10 @@ const [formState, inputs] = useFormState(null, {
  formState.reset(); // resetting the form state
 ```
 
+#### `formOptions.validateOnBlur`
+
+When set to `true`, all form fields will validated when the input loses focus. If not specified, the `validate` function of each input will be called on value change.
+
 #### `formOptions.withIds`
 
 Indicates whether `useFormState` should generate and pass an `id` attribute to its fields. This is helpful when [working with labels](#labels-and-ids).

src/index.d.ts

@@ -41,6 +41,7 @@ interface FormOptions<T> {
   onClear(): void;
   onReset(): void;
   onTouched(event: React.FocusEvent<InputElement>): void;
+  validateOnBlur: boolean;
   withIds: boolean | ((name: string, value?: string) => string);
 }
 

src/parseInputArgs.js

@@ -4,7 +4,7 @@ const defaultInputOptions = {
   onChange: identity,
   onBlur: noop,
   validate: null,
-  validateOnBlur: false,
+  validateOnBlur: undefined,
   touchOnChange: false,
 };
 

src/useFormState.js

@@ -251,7 +251,11 @@ export default function useFormState(initialState, options) {
 
         formOptions.onChange(e, formState.current.values, newValues);
 
-        if (!formOptions.validateOnBlur && !inputOptions.validateOnBlur) {
+        const validateOnBlur = formOptions.validateOnBlur
+          ? inputOptions.validateOnBlur !== false
+          : inputOptions.validateOnBlur;
+
+        if (!validateOnBlur) {
           validate(e, value, newValues);
         }
 

test/types.tsx

@@ -35,6 +35,7 @@ const [formState, input] = useFormState<FormFields>(initialState, {
     const { name, value } = e.target;
   },
   withIds: (name, value) => (value ? `${name}.${value.toLowerCase()}` : name),
+  validateOnBlur: true,
 });
 
 let name: string = formState.values.name;