폼 유효성 검사 - 모듈로 초간단하게 작성

인풋 값이 비어 있으면 안되거나, 특정 형태를 가지고 있어야 할 때 
javaScript로 유효성 검사를 해서 안내문을 띄우도록 합니다. 
이 기능을 하나하나 등록해서 사용하기보단 
외부 모듈화 해서 onkeyup 등에 적용하는게 간단합니다 ^_^

 

필수 입력 구간 안내하기

function formValidation(idlist=[""]) {
    try{
        for(let i of idlist){
            let val = document.getElementById(i).value;
            if (val == undefined || val.length == "" || val == "false") {
                document.getElementById("ck"+i).classList.add("zchkform");
                document.getElementById("ck" + i).innerHTML = "필수 입력 항목입니다";
                return false;
            }
        }
        return true;
    }catch{
        return false;
    }
}

<<사용 방법>>

1. input의 값이 비어있을 때, '필수 입력 항목입니다'라는 안내 메시지를 띄울 html 태그의 id는

    'ck+input의 아이디' 로 설정하면 됩니다.

    ex. 

<input type="text" id="hello" />
<p id="ckhello"></p>

    input 값이 모두 제대로 입력된 경우 true 를 반환하므로 제출을 진행하도록 코드를 짜면 됩니다!

 

2. 함수는 폼 제출 버튼에 달려있어야 합니다. 함수 안에는 빈 칸이면 안되는 input 태그들의 id를 리스트로 넣어주면 됩니다. 

ex) 폼 제출하기 버튼이 아래와 같은 형태

<button type="button" onclick="formValidation(['id3x','xekkd34'])">제출하기</button>