[DOM] Password field is not contained in a form

 

목차

 

1. [DOM] Password field is not contained in a form

프로젝트 진행 중 회원가입을 구현하는 중에 위와 같이 input form 태그 안에 없다는 경고가 콘솔창에서 확인되었다.

위 경고를 해결한 뒤 아래 경고가 나왔다. 아래 경고 해결법은 링크를 참고하자!

2023.08.13 - [HTML] - [DOM] Input elements should have autocomplete attributes (suggested: "new-password")

원인 : input form 태그 안에 없음

[DOM] Password field is not contained in a form

2. 코드 수정

React + styled-components로 프로젝트를 진행 중이었다.

Content를 div에서 form 태그로 변경해주었더니 경고창이 사라졌다!

<S.Content
  onClick={(e) => e.stopPropagation()}
  onSubmit={handleSubmit(onSubmit)}
>
  <S.CloseButton onClick={closeModal} />
  <S.SignupTitleContainer>
    <Logo width="40px" height="24px" />
    <S.SignupTitle>SIGNUP</S.SignupTitle>
  </S.SignupTitleContainer>
  <S.Explanation>Recloset회원가입 페이지입니다.</S.Explanation>
  <S.Explanation style={{ marginBottom: "16px" }}>
    계정이 없으시다면 회원을 등록해주세요.
  </S.Explanation>
  <S.InputBox
    type="text"
    {...register("email", { required: true })}
    placeholder="이메일을 입력해주세요."
  />
  <S.NameLabel>
    <S.InputBox
      type="text"
      {...register("name", { required: true })}
      onChange={(e) => setName(e.target.value)}
      placeholder="닉네임을 입력해주세요."
    />
    <S.DuplicateCheck onClick={handleDuplicateCheckName}>
      중복 검사
    </S.DuplicateCheck>
  </S.NameLabel>
  <S.PasswordLabel>
    <S.InputBox
      type={showPassword ? "text" : "password"}
      {...register("password", { required: true })}
      placeholder="비밀번호를 입력해주세요."
      autoComplete="off"
    />
    <S.VisibilityButton onClick={passwordVisibility} />
  </S.PasswordLabel>
  <S.PasswordLabel>
    <S.InputBox
      type={showPasswordConfirm ? "text" : "password"}
      {...register("passwordConfirm", { required: true })}
      placeholder="비밀번호를 확인합니다."
      autoComplete="off"
    />
    <S.VisibilityButton onClick={passwordConfirmVisibility} />
  </S.PasswordLabel>
  <S.InputBox
    style={{ marginBottom: "16px" }}
    {...register("phone", { required: true })}
    value={formattedPhone}
    onChange={handlePhoneChange}
    placeholder="핸드폰 번호를 입력해주세요."
  />
  {errors.email && <S.ErrorMsg>{errors.email.message}</S.ErrorMsg>}
  {errors.name && <S.ErrorMsg>{errors.name.message}</S.ErrorMsg>}
  {errors.password && <S.ErrorMsg>{errors.password.message}</S.ErrorMsg>}
  {errors.passwordConfirm && (
    <S.ErrorMsg>{errors.passwordConfirm.message}</S.ErrorMsg>
  )}
  {errors.phone && <S.ErrorMsg>{errors.phone.message}</S.ErrorMsg>}
  <S.AdminLabel>
    <input
      type="checkbox"
      checked={isAdmin}
      onChange={(e) => setIsAdmin(e.target.checked)}
      style={{ cursor: "pointer", marginRight: "8px" }}
    />
    관리자로 회원가입하기
  </S.AdminLabel>
  <S.SignupButton type="submit">SIGNUP</S.SignupButton>
</S.Content>;

export const Content = styled.form` /* div 요소에서 form 요소로 변경! */
  width: 360px;
  padding: 36px 0px;
  background-color: rgba(247, 247, 247, 0.7);
  backdrop-filter: blur(5px);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
`;