How to add validation check to input field when we have value present in field?-CodePudding

I have a form with 3 input filed FIRST NAME, LAST NAME, NUMBER. So once forms open there is a particular set of pre filled values coming from backend. So, if i try to add validation check for my firstname and if user makes the filed blank and click submit it shows me undefined in console for the respective firstname value. So, could someone help to add validation check for firstname, last name and number ??

const EditContact = inject('Contacts')(observer((props) => {
  const { text, Contactfirst, apptContacts } = props;
  const { updateContact } = apptContacts;
  const CMS = text.appointmentManager.editAppointmentContact;
  const [state, setState] = React.useState({
    data: {
      firstName: Contactfirst[0],
      lastName: Contactfirst[1],
      number: Contactfirst[2],
    },
    firstNameValid: '',
    lastNameValid: '',
    numberValid: '',
  });
  const handleTextareaChange = (event) => {
    const { data } = state;
    data[event.target.name] = event.target.value;
    setState({
      data,
    });
  };
  const valid = () => {
    if (state.data.firstName !== 'undefined') {
      setState({ firstNameValid: 'Required.Please enter your given name.' });
    }
  };
  const saveButton = () => {
    if (valid()) {
      const personName = `${state.data.firstName} ${state.data.lastName}`;
      const primaryContact = {
        name: personName,
        phoneNumber: state.data.number,
      };
    }
  };
  return (
    <div>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
        {CMS.heading1}
      </h1>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={(state.data.firstName !== 'undefined') ? state.data.firstName : ''} />
      <p>{state.firstNameValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={(state.data.lastName !== 'undefined') ? state.data.lastName : ''} />
      <p>{state.lastNameValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={(state.data.number !== 'undefined') ? state.data.number : ''} />
      <p>{state.numberValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} />
    </div>
  );
}));

export default EditContact ;

CodePudding user response：

Handling form state and validation is a problem many of us have faced. If you are having trouble solving the issue on your own I would suggest taking look at a library that handles the heavy lifting for you. One such library is Formik https://formik.org/docs/overview

Here is a minimal example that illustrates it in action: https://codesandbox.io/s/zkrk5yldz

CodePudding user response：

If you want to use material ui for your components that is easy to apply validation to your text fields. Just follow this link https://mui.com/components/text-fields/#validation