form 안에 데이터 전체 확인하기

[ 기존 방식 ]

//1) select box데이터
var test1_name = document.getElementById("test1_name");
var testName = test1_name.options[test1_name.selectedIndex].value;

//2) input type text
var test1Info = document.getElementById("test1_info");

//... 확인할 값들을 다 작성하고..

if(testName.value == ""){
	alert("testName을 입력해주세요.");
	test1_name .focus();
	return;
}

 

 

이렇게.. 매번 폼데이터를 확인했었는데... 다른 방식이 있지 않을까 하고 찾아보다가 

어차피  ajax로 form데이터 다 넘기는데 그때 확인하면되지 않을까해서.. 

이렇게 작성해봄..

 

//html코드
<form id="Testform">
    <select id="test1_name" name="test1_name" placeholder="테스트1의 이름">
        <option>1</option>
        <option>2</option>
        ..
    </select>

    <input type="text" id="test1_info" name="test1_info" placeholder="테스트1의 정보">
</form>

//js
..
var formData = new FormData(document.getElementById("Testform"));

for(var key of formData.keys()){
	console.log(key , ":" , formData.get(key));
	if(formData.get(key) == ""){
    	alert(document.getElementById(key).placeholder+ "를 입력해주세요.");
        return;
    }
}
..