유효성 검사

현직에 계시는 개발자분과 대화도중 유효성 검사에 대해서 질문을 했다.

내가 워낙 초보이다 보니 Jquery로 유효성 검사를 시도했다.

// addKidsClassForm 폼에 submit 이벤트가 발생할때 반응

 $("#addKidsClassForm").on("submit",function(){

//.val()로 값을 가지고 올 수 있으냐 . trim()을 이용하여 비교

//하면 빈값이나 스페이스값 빈값에 개행까지 잡아낸다.

if ($("input#classNm").val().trim() == ""){

//id가 classNm인 input의 값이 비어있다면,

//alert를 출력한다.

alert("반 이름을 입력하십시오.");

$("input#classNm").focus();

return false;

}

// createDate (생성날짜)에 공백이 발생하면

if ($("input#createDate").val().trim() == ""){

//alert를 출력한다.

alert("생성날짜를 입력하세요.");

// createDate input box로 커서를 이동시킨다.

$("input#createDate").focus();

return false;

}

// 영유아 나이에 공백이 발생하면

if($("#classKidsAge").val().trim() == ""){

//alert를 출력한다

alert("나이를 입력하세요.");

//classKidsAge input으로 커서를 이용시킨다.

$("input#classKidsAge").focus();

return false;

}

}) 

동작은 정상적으로 작동했지만 개발자분이 javascript로 하는게 코드도 더 짧고 간결하다고 했고, 나는 그 의견을 바로 반영해보았다.

function addKidsClassBtn() {

var form = document.addKidsClassForm;

if(!form.classNm.value){

alert("아이디 값이 없습니다.");

form.classNm.focus();

return false;

}

if(!form.createDate.value){

alert("생성날짜를 입력하세요!");

form.createDate.focus();

return false;

}

if(!form.classKidsAge.value){

alert("반 나이를 입력하세요 !");

form.classKidsAge.focus();

return false;

}

return true;

}

솔직히 너무 간결해진것같다 ㅋㅋㅋ.. 뭐가좋다 뭐가좋다 말은 많겠지만 나는 개발자분께서 직접 추천해주신 코드가 훨씬 간결하고 좋아보인다. 물론 주석은 따로 달아놓아야겠다.