feat(forms): show validation messages bellow form elements

Author: assisrafael

src/forms/FormAutocomplete.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { FormContext, handleInputChange, normalizeOptions } from './form-helpers';
+import { FormContext, handleInputChange, normalizeOptions, handleOnInvalid } from './form-helpers';
 import { Dropdown } from '../mixed/Dropdown';
 import { useOpenState } from '../utils/useOpenState';
 
@@ -29,19 +29,7 @@ export function FormAutocomplete({
   const inputRef = useRef(null);
 
   return (
-    <Dropdown
-      isOpen={isOpen()}
-      items={normalizeOptions(options, FormData).filter(filter(searchValue))}
-      onSelect={({ value, label }) => {
-        formState.update(name, value);
-        setSearchValue(label);
-        close();
-      }}
-      template={template}
-      onTouchStart={() => setIgnoreBlur(true)}
-      onMouseEnter={() => setIgnoreBlur(true)}
-      onMouseLeave={() => setIgnoreBlur(false)}
-    >
+    <>
       <input
         {...{ required, name, id, placeholder }}
         type="text"
@@ -72,13 +60,27 @@ export function FormAutocomplete({
             close();
           }
         }}
+        onInvalid={handleOnInvalid.bind(null, formState, name)}
         value={searchValue}
         role="combobox"
         aria-autocomplete="list"
         aria-expanded="false"
         autoComplete="off"
       />
-    </Dropdown>
+      <Dropdown
+        isOpen={isOpen()}
+        items={normalizeOptions(options, FormData).filter(filter(searchValue))}
+        onSelect={({ value, label }) => {
+          formState.update(name, value);
+          setSearchValue(label);
+          close();
+        }}
+        template={template}
+        onTouchStart={() => setIgnoreBlur(true)}
+        onMouseEnter={() => setIgnoreBlur(true)}
+        onMouseLeave={() => setIgnoreBlur(false)}
+      />
+    </>
   );
 }
 

src/forms/FormGroup.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FormAutocomplete } from './FormAutocomplete';
 import { FormCheckbox } from './FormCheckbox';
@@ -8,17 +8,24 @@ import { FormRadio } from './FormRadio';
 import { FormSelect } from './FormSelect';
 import { FormSwitch } from './FormSwitch';
 import { FormTextarea } from './FormTextarea';
+import { FormContext } from './form-helpers';
+
+function FormGroup({ children, name, ...props }) {
+  const formState = useContext(FormContext);
+  const validationMessage = formState.getValidationMessage(name);
 
-function FormGroup({ children, ...props }) {
   return (
     <div className="form-group">
       <FormLabel {...props} />
       {children}
+      <div className="valid-feedback">&nbsp;</div>
+      <div className="invalid-feedback">{validationMessage}</div>
     </div>
   );
 }
 
 FormGroup.propTypes = {
+  name: PropTypes.string.isRequired,
   children: PropTypes.element,
 };
 

src/forms/FormInput.jsx

@@ -1,6 +1,6 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FormContext, handleInputChange } from './form-helpers';
+import { FormContext, handleInputChange, handleOnInvalid } from './form-helpers';
 
 export function FormInput({ id, type, name, placeholder, required, minLength, maxLength, min, max, pattern, step }) {
   const formState = useContext(FormContext);
@@ -11,6 +11,7 @@ export function FormInput({ id, type, name, placeholder, required, minLength, ma
       className="form-control"
       onChange={handleInputChange.bind(null, formState)}
       value={formState.getValue(name) || ''}
+      onInvalid={handleOnInvalid.bind(null, formState, name)}
     />
   );
 }

src/forms/FormSelect.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FormContext, handleInputChange, normalizeOptions } from './form-helpers';
+import { FormContext, handleInputChange, normalizeOptions, handleOnInvalid } from './form-helpers';
 
 export function FormSelect({ id, name, options, required, placeholder }) {
   const formState = useContext(FormContext);
@@ -11,6 +11,7 @@ export function FormSelect({ id, name, options, required, placeholder }) {
       className="form-control"
       onChange={handleInputChange.bind(null, formState)}
       value={formState.getValue(name) || ''}
+      onInvalid={handleOnInvalid.bind(null, formState, name)}
     >
       <option value="">{placeholder}</option>
 

src/forms/form-helpers.js

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
+import { useValueMap } from '../utils/useValueMap';
 
 export const FormContext = React.createContext(null);
 
 export function useForm(initialState) {
   const [formState, setFormState] = useState(initialState);
+  const { getValue: getValidationMessage, setValue: setValidationMessage } = useValueMap();
 
   return {
     update(name, value) {
+      //target.setCustomValidity("");
       setFormState({
         ...formState,
         [name]: value,
@@ -21,6 +24,16 @@ export function useForm(initialState) {
     reset() {
       setFormState(initialState);
     },
+    updateElementValidationMessage(name, element) {
+      if (element.valid) {
+        setValidationMessage(name, '');
+      } else {
+        setValidationMessage(name, element.validationMessage);
+      }
+    },
+    getValidationMessage(name) {
+      return getValidationMessage(name);
+    },
   };
 }
 
@@ -32,6 +45,10 @@ export function handleInputChange(formState, event) {
   formState.update(name, value);
 }
 
+export function handleOnInvalid(formState, name, { target }) {
+  formState.updateElementValidationMessage(name, target);
+}
+
 export function normalizeOptions(options, formData) {
   let _options = typeof options === 'function' ? options(formData) : options;
 

src/utils/useValueMap.js

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export function useValueMap() {
+  const [valueMap, updateValueMap] = useState({});
+
+  function setValue(key, value) {
+    updateValueMap((prevValueMap) => {
+      return {
+        ...prevValueMap,
+        [key]: value,
+      };
+    });
+  }
+
+  function getValue(key) {
+    return valueMap[key];
+  }
+
+  return {
+    setValue,
+    getValue,
+    setValueIfUnset(key, value) {
+      if (!getValue(key)) {
+        setValue(key, value);
+      }
+    },
+  };
+}