Add test case for validation bug

Author: zackify

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-validify",
-  "version": "5.7.7",
+  "version": "5.7.8",
   "description": "Form validation made easy",
   "main": "dist/index.js",
   "module": "lib/index.js",

src/form.tsx

@@ -17,6 +17,7 @@ type Context = {
   hasBlurred: (name: string) => any;
   setErrors: Dispatch<SetStateAction<Error[]>>;
   updateValue: (name: string, value: string) => any;
+  setValuesBlurred: Dispatch<SetStateAction<ValuesBlurred>>;
 };
 
 const FormContext = React.createContext<Context>({} as Context);
@@ -45,6 +46,7 @@ function Form<Values>({
         errors,
         setErrors,
         valuesBlurred,
+        setValuesBlurred,
         hasBlurred: name => {
           if (valuesBlurred[name]) return;
           //Store list of values that have been touched, so we can run validation on them now

src/use-submit.ts

@@ -3,15 +3,27 @@ import validate from './validate';
 import { FormContext } from './form';
 
 const useSubmit = () => {
-  const { rules, values, errors, setErrors } = React.useContext(FormContext);
+  const {
+    rules,
+    values,
+    errors,
+    setErrors,
+    setValuesBlurred,
+  } = React.useContext(FormContext);
 
   const handleSubmit = (callback: (values: any) => any) => {
     let errors = validate({
       values,
       rules,
       setErrors,
     });
-    if (!errors.length) callback(values);
+    if (!errors.length) return callback(values);
+
+    // if there are errors, mark all values as blurred,
+    // so validation runs on change after hitting submit
+    setValuesBlurred(
+      Object.keys(rules).reduce((acc, name) => ({ ...acc, [name]: true }), {}),
+    );
   };
 
   return {

src/validate.ts

@@ -7,24 +7,11 @@ type Props = {
   values: any;
   rules: { [key: string]: RuleFn[] };
   setErrors: Dispatch<SetStateAction<Error[]>>;
-  errors?: Error[];
   valuesBlurred?: { [key: string]: boolean };
 };
 
-export default ({
-  values,
-  rules,
-  errors = [],
-  setErrors,
-  valuesBlurred,
-}: Props) => {
+export default ({ values, rules, setErrors }: Props) => {
   let newErrors = Object.keys(rules)
-    .filter(rule => {
-      if (errors.filter(error => error.name === rule).length) return true;
-      if (valuesBlurred) return valuesBlurred[rule];
-
-      return true;
-    })
     .map(field =>
       rules[field].map(rule => {
         let error = rule(get(values, field) || '', values);

tests/form.test.js

@@ -147,3 +147,20 @@ test('Empty input value gets passed as empty string to rule fn', async () => {
   expect(spy.mock.calls[0][0]).toEqual('');
   expect(spy.mock.calls[0][1]).toEqual({ email: 'test' });
 });
+
+test('Field validation runs on change, after submitting', async () => {
+  let { queryByPlaceholderText, getByText } = render(<TestForm />);
+  const name = queryByPlaceholderText('name');
+
+  //trigger submit
+  getByText('Submit Form').click();
+
+  //change name to something valid
+  fireEvent.change(name, { target: { value: 'testing' } });
+
+  // change it back to invalid, and make sure the validation is shown
+  fireEvent.change(name, { target: { value: '' } });
+
+  //ensure the validation shows up
+  expect(getByText('This field is required')).toBeInTheDocument();
+});