1

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 ;
1

2 Answers 2

0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.