react bootstrap form validation 체크 하기

리액트 부트스트랩에서 form validation체크하는 방법을 알아보자.

 

순서는 다음과 같다.

 

1. form태크 속성등록

2. requried 추가

3. Feedback 추가

4. 폼 validation 체크 확인

5. 서버사이드 체크

6. 관련 소스 확인

7. validation 체크 스크린 캡쳐

 

1. form태크 속성등록

<Form noValidate validated={validated} className="form-signup" onSubmit={handleSubmit}>

2. requried 추가

<Form.Control className={"form-signup-input"} 
              onChange={handleName} 
              type={"text"} 
              placeholder={"Enter name"} 
              required />

3. Feedback 추가

<Form.Control.Feedback type="invalid" className={"float-left"}>
이름을 입력해주세요!
</Form.Control.Feedback>

4. 폼 validation 체크 확인

const form = event.currentTarget;
if (form.checkValidity() === false) {
   // validation 체크에 걸림
   // todo...
}else{
   // validation 체크 통과
   // todo...
}

5. 서버사이드 체크

form validation의 경우 클라이언트 사이드에서 체크를 한다. form의 값의 정합성을 체크하는 것이다. 하지만 아이디 중복 체크나 이메일중복체크의 경우는 서버에서 체크를 하고 결과를 내려받아서 표시를 해야된다. 그런경우에는 

is-valid

를 이용해서 표시하면 된다. is-valid를 class로 추가하면 feedback 내용을 보여주게 되어있다.

<Form.Control className={`form-signup-email ${isValid?'is-invalid':''}`} 
           onChange={handleEmail} 
           type={"email"} 
           placeholder={"Enter email"} 
           required />
<Form.Control.Feedback type="invalid" className={"float-left"}>
{errorMail}
</Form.Control.Feedback>

6. 관련 소스 확인

회원가입 중복시 api 호출 json 결과값은 다음과 같다.

{
    "status": 400,
    "message": "EMAIL DUPLICATED",
    "code": "MEMBER-ERR-400"
}

 

사용자 가입 validation 체크하는 소스이다.

import {Button, Container, Form} from "react-bootstrap";
import {useState} from "react";
import {existUser, saveUser} from "../api";

const errorMsg = {
    'empty' : '메일 주소를 입력해주세요',
    'exist_email': '이미 등록된 메일입니다. 다른 메일을 입력해주세요',
}

function Signup(){

    const [user, setUser] = useState({name:'',email:'',password:''})
    const [validated, setValidated] = useState(false);
    const [resultMessage,setResultMessage] = useState({code:"200",message:"ok"})

    const [isValid,setIsValid] = useState(false);
    const [errorMail,setErrorMail] = useState(errorMsg.empty);

    function handleName(e){
        console.log(e.target.value);
        setUser({...user,name:e.target.value})
    }

    function handleEmail(e){
        console.log(e.target.value);
        setIsValid(false);
        setErrorMail(errorMsg.empty)
        setUser({...user,email:e.target.value})
    }
    function handlePassword(e){
        setUser({...user,password:e.target.value})

    }

    function handleSubmit(event){
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }else{
            saveUser(user).then(response=>{
                setResultMessage({
                    resultCode: response.code,
                    resultMessage: response.message
                })
                if(response.status===400){
                    setIsValid(true);
                    setErrorMail(`[${response.code}] ${errorMsg.exist_email}`);
                    alert("오류");
                }
                if(response.status===200){
                    alert("등록되었습니다.");
                    setIsValid(false);
                }
            });
        }
        setValidated(true);
        event.preventDefault();
        event.stopPropagation();
    };

    return(
        <Container className={"text-center"} fluid>
            <Form noValidate validated={validated} className="form-signup" onSubmit={handleSubmit}>
                <h1 className="h3 mb-3 font-weight-normal">Please sign up</h1>
                <Form.Group controlId={"formBasicName"}>
                    <Form.Label className="sr-only">Name</Form.Label>
                    <Form.Control className={"form-signup-input"} 
                                  onChange={handleName} 
                                  type={"text"} 
                                  placeholder={"Enter name"}
                                  minLength={"3"}
                                  required  />
                    <Form.Control.Feedback type="invalid" className={"float-left"}>
                        이름을 입력해주세요!(3글자 이상입력)
                    </Form.Control.Feedback>
                </Form.Group>
                <Form.Group controlId={"formBasicEmail"}>
                    <Form.Label className="sr-only">Email address</Form.Label>
                    <Form.Control className={`form-signup-email ${isValid?'is-invalid':''}`} 
                                  onChange={handleEmail} 
                                  type={"email"} 
                                  placeholder={"Enter email"} 
                                  required />
                    <Form.Control.Feedback type="invalid" className={"float-left"}>
                        {errorMail}
                    </Form.Control.Feedback>
                </Form.Group>
                <Form.Group controlId={"formBasicPassword"}>
                    <Form.Label className="sr-only">Password</Form.Label>
                    <Form.Control className={"form-signup-input"} 
                                  onChange={handlePassword} 
                                  type={"password"} 
                                  placeholder={"Password"} 
                                  required />
                    <Form.Control.Feedback type="invalid" className={"float-left"}>
                        비밀번호를 입력해주세요!
                    </Form.Control.Feedback>
                </Form.Group>
                <Button className="btn btn-lg btn-primary btn-block" variant={"primary"} type={"submit"}>
                    Sign up
                </Button>
                <p className={"float-left"}><a href={"/signin"}>Sign in</a></p>
                <p className="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
            </Form>
        </Container>
    )
}

export default Signup;

7. validation 체크 스크린 캡쳐

처음 등록화면

sign up 버튼을 클릭한 경우

입력을 제대로 한경우

메일이 중복되는 경우

 

참조: getbootstrap.com/docs/5.0/forms/validation/

Validation

 

참조: mdbootstrap.com/docs/standard/forms/validation/#section-server-side

Bootstrap Validation - examples & tutorial