parse-form.ts

import { set } from 'jsonpointer';
import { maxDate, minDate } from './date';

export function parseForm<T extends object>(
  data: FormData | URLSearchParams
): T {
  const obj = Object.create(null) as T;
  for (const [key, value] of data) {
    if (typeof value !== 'string') {
      throw new Error(`Unexpected value type: ${value}`);
    }
    let parsedValue: string | boolean | number | Date | null = value
      // https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2.1
      // The form field names and values are escaped: space characters are replaced by `+', and then
      // reserved characters are escaped as per [URL]; that is, non-alphanumeric characters are
      // replaced by `%HH', a percent sign and two hexadecimal digits representing the ASCII code of
      // the character. Line breaks, as in multi-line text field values, are represented as CR LF
      // pairs, i.e. `%0D%0A'.
      // tldr; FormData encodes newlines as \r\n, which means the string might be longer than what you validated on the client which might have used \n depending on the client OS
      .replaceAll('\r\n', '\n');
    let [pointer, type] = key.split(':');
    type ||= pointer.endsWith('_id') ? 'nullstring' : 'string';
    switch (type) {
      case 'string':
        parsedValue = value;
        break;
      case 'nullstring':
        parsedValue = value === '' ? null : value;
        break;
      case 'boolean':
        parsedValue = value === 'true';
        break;
      case 'number':
        parsedValue = value === '' ? null : parseFloat(value);
        break;
      case 'integer':
        parsedValue = value === '' ? null : parseInt(value);
        break;
      case 'date': {
        if (value === '') {
          parsedValue = null;
          break;
        }
        const d = new Date(value);
        if (
          isFinite(d.getTime())
        ) {
          parsedValue = d;
          break;
        }
        parsedValue = null;
        break;
      }
      case 'json':
        parsedValue = JSON.parse(value);
        break;
      default:
        throw new Error(`Unexpected type directive "${type}" in "${key}".`);
    }
    set(obj, '/' + pointer, parsedValue);
  }
  return obj;
}

/*
EXAMPLE:

<!--
  The "name" attribute of an input/select/textarea element should be a 
  jsonpointer, and optionally, a colon ":" followed by a data type
  such as "integer" or "date"... the default is "string".
-->
                               
<form>
  <input name="first_name" type="text" value="Jeremy" />
  <input name="last_name" type="text" value="Danyow" />

  <input name="fruits/0/name" type="text" value="banana" />
  <input name="fruits/0/color" type="text" value="yellow" />
  <input name="fruits/0/quantity:integer" type="number" value="25" />

  <input name="fruits/1/name" type="text" value="apple" />
  <input name="fruits/1/color" type="text" value="red" />
  <input name="fruits/1/quantity:integer" type="number" value="36" />
</form>

<script>
  addEventListener('submit', event => {
    const form = event.target;
    const formData = new FormData(form);
    const obj = parseForm(formData);
    
    /*
    obj will look like:

    { 
      first_name: string;
      last_name: string;
      fruits: {
        name: string;
        color: string;
        quantity: number;
      }[];
    }

    */
  });
</script>