React 및 Material UI를 사용하여 유효성 검사가 포함된 문의 양식 만들기

이 기사에서는 React, Typescript 및 Material UI에서 유효성 검사를 통해 간단한 문의 양식 구성 요소를 구축하는 방법을 살펴보겠습니다. 이에 대한 CodeSandbox URL을 보려면 페이지 끝까지 아래로 스크롤하십시오.

뼈대 형성 💀

먼저 반응 구성 요소를 만들고 이를 ContactForm이라고 부르겠습니다.

const ContactForm = () => {}

그런 다음 빈 양식 요소를 추가합니다.

export const ContactForm = () => 
{
  return (
    <form>
    </form>
  )
}

이 양식은 현재 아무 작업도 수행하지 않으며 페이지에 아무 것도 표시하지 않습니다. 따라서 Material UI 구성 요소를 사용하여 양식 요소를 추가하기 시작합니다. 이렇게 하면 연락처 양식의 기본 골격이 구축됩니다. 추가하는 요소는 다음과 같습니다.

사용자가 이름, 이메일 및 메시지를 입력할 수 있는 세 개의 텍스트 필드.

양식을 제출하는 데 버튼 하나가 사용되었습니다.

export const ContactForm = () => 
{
  return (
    <form>
      <TextField label="Full Name" />
      <TextField label="Email"/>
      <TextField label="Message"/>
      <Button type="submit">Submit</Button>
    </form>
  )
}

이제 양식은 다음과 같아야 합니다.

fullWidth 구성 요소에 TextField를 추가하고 메시지 텍스트 필드에 multiline 및 rows={5}를 추가하여 양식을 보기 좋게 만들기 위해 약간의 조정을 할 것입니다.
fullWidth가 설정되면 입력은 해당 컨테이너의 전체 너비를 차지합니다.

export const ContactForm = () => 
{
  return (
    <form>
      <TextField label="Full Name" fullWidth autocomplete="none"/>
      <TextField label="Email" fullWidth autocomplete="none"/>
      <TextField label="Message" fullWidth multiline rows={5} autocomplete="none"/>
      <Button type="submit">Submit</Button>
    </form>
  )
}

양식 유효성 검사 ✅

이제 양식이 조금 더 좋아졌으므로 유효성 검사 측면을 살펴보겠습니다.
유효성 검사를 처리하기 위해 별도의 파일에 새 함수를 만들고 양식의 입력 값을 유효성 검사하는 데 필요한 함수를 추가 및 노출하겠습니다.

const initialFormValues = {
  fullName: "",
  email: "",
  message:"",
  formSubmitted: false,
  success: false
}

export const useFormControls = () => {
  // We'll update "values" as the form updates
  const [values, setValues] = useState(initialFormValues);
  // "errors" is used to check the form for errors
  const [errors, setErrors] = useState({} as any);
  const validate: any = (fieldValues = values) => {
    // this function will check if the form values are valid
  }
  const handleInputValue: any = (fieldValues = values) => {
    // this function will be triggered by the text field's onBlur and onChange events
  }
  const handleFormSubmit = async (e: any) => {
    // this function will be triggered by the submit event
  }
  const formIsValid: any = () => {
    // this function will check if the form values and return a boolean value
  }
 return {
    handleInputValue,
    handleFormSubmit,
    formIsValid,
    errors
  };
}

이제 기능이 준비되어 이벤트 처리를 설정할 것입니다. 또한 useFormControls 구성 요소의 기능에 액세스해야 하므로 초기 양식 값을 포함할 객체를 생성합니다.

export const ContactForm = () => {
  const {
    handleInputValue,
    handleFormSubmit,
    formIsValid,
    errors
  } = useFormControls();
  return (
    <form onSubmit={handleFormSubmit}>  
      <TextField name="fullName" onBlur={handleInputValue} onChange={handleInputValue} label="Full Name" fullWidth autoComplete="none" {...(errors["fullName"] && { error: true, helperText: errors["fullName"] })}/>   
      <TextField name="email" onBlur={handleInputValue} onChange={handleInputValue} label="Email" fullWidth autoComplete="none" {...(errors["email"] && { error: true, helperText: errors["email"]  })}/>   
      <TextField name="message" onBlur={handleInputValue} onChange={handleInputValue} label="Message" fullWidth multiline rows={5} autoComplete="none" {...(errors["message"] && { error: true, helperText: errors["message"] })}/> 
      <Button type="submit" disabled={!formIsValid()}>Submit</Button>   
    </form> 
  )
}

입력 필드에는 공유 속성과 값이 있으므로 코드를 DRY로 만들기 위해 텍스트 필드의 속성 값으로 배열을 만들고 파일 상단에 추가하고 반복합니다.

const inputFieldValues = [
  {
    name: "fullName",
    label: "Full Name",
    id: "my-name"
  },
  {
    name: "email",
    label: "Email",
    id: "my-email"
  },
  {
    name: "message",
    label: "Message",
    id: "my-message",
    multiline: true,
    rows: 10
  }
];
export const ContactForm = () => {
  const {
    handleInputValue,
    handleFormSubmit,
    formIsValid,
    errors
  } = useFormControls();
  return (
    <form onSubmit={handleFormSubmit}>
      {inputFieldValues.map((inputFieldValue, index) => {
        return (
          <TextField
            key={index}
            onBlur={handleInputValue}
        onChange={handleInputValue}
            name={inputFieldValue.name}
            label={inputFieldValue.label}
            multiline={inputFieldValue.multiline ?? false}
            rows={inputFieldValue.rows ?? 1}
        autoComplete="none"
        {...(errors[inputFieldValue.name] && { error: true, helperText: errors[inputFieldValue.name] })}

          />
        );
      })}
      <Button
        type="submit"
        disabled={!formIsValid()}
      >
        Send Message
      </Button>
    </form>
  )
}

설정이 완료되었습니다. 이제 useFormControls 구성 요소에 값을 입력하기만 하면 됩니다.

onBlur 및 onChange 이벤트부터 시작하겠습니다. 사용자가 입력 상자를 클릭하고 아무 것도 입력하지 않고 클릭하면 오류 메시지를 표시하려면 이것이 필요합니다. onChange 이벤트는 텍스트 필드의 값이 변경될 때 트리거되며 이는 동일한 기능을 트리거합니다handleInputValue.

const handleInputValue = (e: any) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value
    });
    validate({ [name]: value });
  };

이 👆🏼는 특정 요소에 대한 상태 변수values를 업데이트합니다(예: 이름이 "이메일"인 "이메일"텍스트 필드가 업데이트되면 "이메일의 값이 업데이트됨).

이 함수는 변경된 텍스트 필드의 값을 확인하고 적절한 오류 메시지를 설정하는 validate 함수를 호출합니다. 올바른 형식이 입력되었는지 확인하기 위해 이메일 값에 대해 유효성을 검사하는 데 정규식이 사용됩니다. 상태 변수errors가 관련 메시지로 업데이트됩니다.

const validate: any = (fieldValues = values) => {
    let temp: any = { ...errors }

    if ("fullName" in fieldValues)
      temp.fullName = fieldValues.fullName ? "" : "This field is required."

    if ("email" in fieldValues) {
      temp.email = fieldValues.email ? "" : "This field is required."
      if (fieldValues.email)
        temp.email = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(fieldValues.email)
          ? ""
          : "Email is not valid."
    }

    if ("message" in fieldValues)
      temp.message =
        fieldValues.message ? "" : "This field is required."

    setErrors({
      ...temp
    });
  }

다음으로 formIsValid 함수를 업데이트합니다.

The errors state variable would have been updated in the validate function.
We check if the properties are set, to cover the first time the contact form loads when the errors state variable is empty.

 const formIsValid = (fieldValues = values) => {
    const isValid =
      fieldValues.fullName &&
      fieldValues.email &&
      fieldValues.message &&
      Object.values(errors).every((x) => x === "");

    return isValid;
  };

마지막으로 보낼 양식을 실제로 제출하는 기능이 있습니다. 연락처 양식을 전자 메일로 보내는 기능postContactForm은 이 자습서의 일부로 다루지 않지만 나중 자습서에서 다룰 것입니다.

const handleFormSubmit = async (e: any) => {
    e.preventDefault();
    if (formIsValid()) {
      await postContactForm(values);
      alert("You've posted your form!")
    }
  };

이 작업이 끝나면 제대로 작동하는 문의 양식이 생성됩니다(이메일 보내기 부분 빼기 😊).


이게 도움이 되길 바란다. 여기에서 전체 작업 코드를 찾을 수 있습니다.



이후 게시물에서는 .NET Core 백엔드로 이메일을 보내고 화면에 메시지를 표시하는 방법을 살펴보겠습니다.