🌐 Confirm password 폼 쉽게 구현하기

비밀번호 재확인 기능 구현

두 input 입력 태그창이 있고, 이 두 input창의 값(비밀번호)가 같아야 submit이 되게 처리할 경우, 구현하는 방법은 자바스크립트와 css로 하드코딩하거나 등 여러가지가 존재한다.

그중, 이번시간에는 setCustomValidity() 를 통해 간단하게 Confirm password를 구현해보는 시간을 가져보겠다.

 

setCustomValidity

HTMLObjectElement 인터페이스 의 setCustomValidity() 메서드 는 요소에 대한 사용자 정의 유효성 메시지를 설정한다.

아래사진에서 볼수 있듯이 input 타입에 적절하지 않는 값을 넣었을때 브라우저에서 띄우는 느낌표 말풍선의 내용을 설정 해 줄수 있다.

 

단, 오류메세지 말풍선의 내용을 api를 통해 설정해주게 되면, 오류 메시지가 비어 있지 않은 한 양식은 유효성 검사를 통과하지 않고 제출되지 않는 다는 특징이 있는데, 이를 이용해 비밀번호 재확인 로직을 간단하게 구현할 수 있다.

<form class="pure-form">
    <fieldset>
        <legend>Confirm password with HTML5</legend>
        <input type="password" placeholder="Password" id="password" required>
        <input type="password" placeholder="Confirm Password" id="confirm_password" required>
        <button type="submit" class="pure-button pure-button-primary">Confirm</button>
    </fieldset>
</form>

var password = document.getElementById("password")
  ,confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) { // 만일 두 인풋 필드값이 같지 않을 경우
    // setCustomValidity의 값을 지정해 무조건 경고 표시가 나게 하고
    confirm_password.setCustomValidity("Passwords Don't Match"); 
  } 
  else { // 만일 두 인풋 필드값이 같을 경우
    // 오류가 없으면 메시지를 빈 문자열로 설정해야한다. 오류 메시지가 비어 있지 않은 한 양식은 유효성 검사를 통과하지 않고 제출되지 않는다.
    // 따라서 빈값을 주어 submit 처리되게 한다
    confirm_password.setCustomValidity(''); 
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

See the Pen Confirm PWD by barzz12 (@inpaSkyrim) on CodePen.