如何验证最后 forms 日期的单个输入文本字段，并在日期无效时显示错误消息

Question

I have a React Material UI component that serves to register a user's 'Date of birth'. The component is built with 3 different inputs for the day, month, and year.

The example in the screenshot

What I need to do is to show an error when a user inputs a wrong date for example I could write 31 - Feb - 3000 and when I press the submit tick I should see a red box on both Day and year with a text saying like invalid date / invalid year.

The example of what I want to achieve

I have no clue how to do that as first time doing a component like this and need help.

I'm sharing the partial component regarding those 3 fields in case I can send more details if need it based on the comment I'll receive.

<EditableDetailTemplate
      onStartEditing={() => {
        setEditValue(editValue);
      }}
      onDoneEditing={() => {
        editDateOfBirth(month, year, day);
      }}
      displayComponent={
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <DobAndAge dateOfBirth={editValue} />
        </Box>
      }
      editComponent={
        <Stack
          direction="row"
          justifyContent="flex-start"
          alignItems="flex-start"
          spacing={3}
        >
          <TextField
            sx={{ width: 100 }}
            value={day}
            onChange={e => setDay(Number(e.target.value))}
            placeholder={intl.formatMessage({ defaultMessage: 'DD' })}
            label={intl.formatMessage({ defaultMessage: 'Day' })}
            inputProps={{
              inputMode: 'numeric',
              pattern: '[0-9]*',
              min: 1,
              max: maxDay || 31,
            }}
            type="number"
          />
          <FormControl>
            <InputLabel id="month-select">{intl.formatMessage({ defaultMessage: 'Month' })}</InputLabel>
            <Select
              sx={{ width: 100 }}
              labelId="month-select"
              value={month}
              label={intl.formatMessage({ defaultMessage: 'Month' })}
              onChange={e => setMonth(Number(e.target.value))}
            >
              {months.map(m => (
                <MenuItem key={m.monthString} value={m.monthNumber}>
                  {m.monthString}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <TextField
            sx={{ width: 100 }}
            value={year}
            onChange={e => setYear(Number(e.target.value))}
            placeholder={intl.formatMessage({ defaultMessage: 'YYYY' })}
            label={intl.formatMessage({ defaultMessage: 'Year' })}
            inputProps={{
              inputMode: 'numeric',
              pattern: '[0-9]*',
              max: new Date().getFullYear(),
            }}
            type="number"
          />
        </Stack>
      }
    />

As per comments adding everything related to the component

full component

import { format } from '@lib/date-util';
import {
  Box,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  Stack,
  TextField
} from '@mui/material';
import { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { calculateAge, formatOnlyDateToLocale, monthsList } from '../../utils/date-util';
import { EditableDetailTemplate } from './EditableDetailTemplate';

export const DateOfBirth = ({ dateOfBirth, onEdit }) => {
  const intl = useIntl();
  const [editValue, setEditValue] = useState(dateOfBirth);

  const dob = dateOfBirth ? new Date(dateOfBirth) : null;

  const [month, setMonth] = useState(dob?.getMonth() + 1);
  const [year, setYear] = useState(dob?.getFullYear());
  const [day, setDay] = useState(dob?.getDate());

  const fullDate =
    Boolean(year) && Boolean(month) ? new Date(`${year}-${month}-01`) : null;

  const maxDay = fullDate
    ? new Date(fullDate.getFullYear(), fullDate.getMonth() + 1, 0).getDate()
    : null;

  const editDateOfBirth = () => {
    let newYear;
    let newMonth;
    let newDate;

    const oldYear = dob?.getFullYear() || null;
    const oldMonth = dob?.getMonth() + 1 || null;
    const oldDate = dob?.getDate() || null;

    if (oldMonth !== month) {
      newMonth = month;
    }

    if (oldYear !== year) {
      newYear = year;
    }

    if (oldDate !== day) {
      newDate = day;
    }

    const oldDob = `${oldYear}-${oldMonth}-${oldDate}`;
    const newDob = `${newYear || oldYear}-${newMonth || oldMonth}-${
      newDate || oldDate
    }`;

    const oldDobFormatted = !oldDob.includes('null')
      ? format(new Date(oldDob), 'yyyy-MM-dd')
      : null;
    const newDobFormatted = format(new Date(newDob), 'yyyy-MM-dd');

    onEdit(oldDobFormatted, newDobFormatted);
  };

  useEffect(() => {
    setEditValue(dateOfBirth);
  }, [dateOfBirth]);

  const months = monthsList();

  return (
    <EditableDetailTemplate
      onStartEditing={() => {
        setEditValue(editValue);
      }}
      onDoneEditing={() => {
        editDateOfBirth(month, year, day);
      }}
      displayComponent={
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <DobAndAge dateOfBirth={editValue} />
        </Box>
      }
      editComponent={
        <Stack
          direction="row"
          justifyContent="flex-start"
          alignItems="flex-start"
          spacing={3}
        >
          <TextField
            sx={{ width: 100 }}
            value={day}
            onChange={e => setDay(Number(e.target.value))}
            placeholder={intl.formatMessage({ defaultMessage: 'DD' })}
            label={intl.formatMessage({ defaultMessage: 'Day' })}
            inputProps={{
              inputMode: 'numeric',
              pattern: '[0-9]*',
              min: 1,
              max: maxDay || 31,
            }}
            type="number"
          />
          <FormControl>
            <InputLabel id="month-select">{intl.formatMessage({ defaultMessage: 'Month' })}</InputLabel>
            <Select
              sx={{ width: 100 }}
              labelId="month-select"
              value={month}
              label={intl.formatMessage({ defaultMessage: 'Month' })}
              onChange={e => setMonth(Number(e.target.value))}
            >
              {months.map(m => (
                <MenuItem key={m.monthString} value={m.monthNumber}>
                  {m.monthString}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <TextField
            sx={{ width: 100 }}
            value={year}
            onChange={e => setYear(Number(e.target.value))}
            placeholder={intl.formatMessage({ defaultMessage: 'YYYY' })}
            label={intl.formatMessage({ defaultMessage: 'Year' })}
            inputProps={{
              inputMode: 'numeric',
              pattern: '[0-9]*',
              max: new Date().getFullYear(),
            }}
            type="number"
          />
        </Stack>
      }
    />
  );
};

const DobAndAge = ({ dateOfBirth }) =>
  dateOfBirth
    ? `${formatOnlyDateToLocale(dateOfBirth)} 
(age: ${calculateAge(dateOfBirth)})`
    : '';

The parent component is only relates to this part

The onEdit part

const onEditDateOfBirth = async (oldDob, newDob) => {
    if (oldDob !== newDob) {
      try {
        await updateCandidateDetails({ dateOfBirth: newDob });
      } catch {
        openSnackbar({
          severity: 'error',
          message: intl.formatMessage({
            defaultMessage: 'Error updating date of birth',
          }),
        });
        return;
      }

      openSnackbar({
        message: oldDob
          ? intl.formatMessage(
              {
                defaultMessage:
                  'Date of birth has been changed from {oldDob} to {newDob}',
              },
              {
                newDob,
                oldDob,
              },
            )
          : intl.formatMessage(
              {
                defaultMessage: 'Date of birth has been changed to {newDob}',
              },
              {
                newDob,
              },
            ),
        action: () => {
          updateCandidateDetails({ dateOfBirth: oldDob });
        },
      });
    }
  };

The component Date of birth

 <DetailsItem
          title={intl.formatMessage({ defaultMessage: 'Date of birth:' })}
        >
          <DateOfBirth
            dateOfBirth={candidate.dateOfBirth}
            onEdit={onEditDateOfBirth}
          />
        </DetailsItem>

Months utility

import { enUS } from 'date-fns/locale';

const monthsList = () => {
  const months = [];
  for (let i = 0; i < 12; i++) {
    months.push({
      monthString: enUS.localize.month(i, { width: 'abbreviated' }),
      monthNumber: i + 1,
    });
  }
  return months;
};

export default monthsList;

If anything still missing please comment and I'll add

Answer 1

When user clicks on submit button, you should call a function and read the values of inputs and validate them. If there is any error, you set a state indicating an error; let's say you call setError(true) . Also, there is a prop called error on your inputs which when they are true , their UI will change so that user understands there is an error. You can also store the text you want to show when an error occurs in a state and display it accordingly. Remember to remove error text and set error state to false when there is no error.

See mui documentation for more information.