inflearn logo
강의

Course

Instructor

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

Checking membership sign-up validity using react-hook-form

회원가입 유효성 부분 페이지 안뜨는 이유 좀요....

284

northfce

1 asked

0

import React ,{useRef}from 'react'
import { Link } from 'react-router-dom'
import {useForm} from 'react-hook-form'
function RegisterPage() {

  const {register,watch,errors} = useForm()
  const password = useRef();

  console.log(watch("email"))

  return (
    <div className='auth-wrapper'>
      <div style={{textAlign:'center'}}>
        <h3>Register</h3>
      </div>
      <form>
        <label>Email</label>
        <input 
            name="email" 
            type='email'
            // ref={register({ required: true, pattern: /^[0-9a-zA-Z]([-_._]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_._]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i })}
          />
        {/* {errors.email && <p>This field is required</p>} */}

        <label>Name</label>
        <input 
          name="name" 
          // ref={register({ required: true, maxLength: 10 })}
        />
        {/* {errors.name && errors.name.type ==="requirerd" 
        && <p>This field is required</p>}
        {errors.name && errors.name.type ==="maxLength" 
        && <p>This input exceed maximum length</p>} */}
        
        <label>Password</label>
        <input
          name="password" type='password' 
          // ref={register({required: true, minLength:6})}
        />
        {/* {errors.password &&errors.password && errors.password.type ==="required" 
        && <p>This name field is required</p>}
        {errors.password &&errors.password && errors.password.type ==="minLength" 
        && <p>비밀번호 자리가 6자리 이상이어야 합니다.</p>} */}
        <label>Password Confirm</label>
        <input
          name="Password Confirm"
          type='password' 
          // ref={register({
          //   required:true,
          //   validate:(value)=> 
          //       value === password.current
          // })}
        />
        {/* {errors.password_confirm && errors.password_confirm.type  ==="required"
        && <p>This password confirm field is required</p>}
        {errors.password_confirm && errors.password_confirm.type ==="validate"
        && <p>This passwords do not match</p>} */}
        <input type="submit" />
        <Link style={{color:'gray',textDecoration:'none'}}to="/login" >이미 아이디가 있다면</Link>
        </form>
    </div>
  )
}

export default RegisterPage

 

이렇게 저 부분을 주석처리하면 회원가입 페이지가 나오는데 주석처리를 해제하면 회원가입 페이지가 안떠요...

react 웹앱 firebase

Answer 1

0

John Ahn

안녕하세요 ~

혹시 브라우저 콘솔창에 에러가 뜨고 있나요 ~ ?

1

northfce

해결했습니다 버전 문제 였습니다!!
감사합니다!!

ESlint

0

134

1

현 강의자료는 이해는 했는데, 그럼 전 강의자료는 이젠 활용을 못하나요?

0

98

0

배포 후 빈페이지

0

149

1

notification 관련 질문에 AI가 엉뚱하게 대답하여 다시 질문합니다.

0

140

1

notification 관련 부분은 예전 강의를 들어야 하나요?

0

143

1

npm run build시 오류가 있습니다.

0

225

1

이미지 업로드시 403에러가 발생하는데 해결법이 있을까요?

0

777

1

이건 어디에 저장이 되는 것인가요?? redux에 저장이 되는 것인가요??

0

256

1

eslint 질문 있습니다.

0

234

1

npm create react app

0

314

2

[리덕스 미들웨어]강의 중에 createStore에서 막혔습니다.

0

528

3

강의 pdf 파일

0

435

2

파이어베이스 파일 삭제, 사진 업로드 기능 오류

0

330

1

firebase 초기화 오류

0

597

1

mime-types 패키지를 import 할 때 에러 발생

0

280

1

리덕스 스토어에 로그인 유저 정보가 저장이 되지 않는 문제

0

340

1

강의 리뉴얼 일정을 알 수 있을까요?

0

370

1

완성본으로 제공된 코드를 구동시켜보려면

2

408

1

DB와 강의 리뉴얼

0

505

1

next.js 환경에서 이 수업을 들을 수 있나요?

0

391

1

Cannot read properties of undefined (reading 'isLoading') 오류 해결법 혹시 알 수 있을까요...

0

512

1

addChatRoom 함수 작성시

0

279

1

강의 도표 자료 다운을 받으면, zip파일에 아무것도 들어있지않다고 나옵니다.

0

247

1

Favorite.js 질문입니다.! 화면 새로고침하면, 추가한 Favorite chatrooms가 날라가고 딱 1개만 남습니다!

0

298

1