[jQuery] form의 모든 input text null check

form의 모든 input text null check

회원가입처럼 form의 text field null check시 기존에는 

존재하는 모든 필드를 id로 개별적으로 체크를 했었다.

하지만 필드 항목이 늘어나거나 바뀌는 경우에는 스크립트 부분도 

같이 수정해야 하는 번거로움이 있어서 필드가 추가, 변경되더라도

스크립트는 수정할 필요가 없으면 좋겠다는 생각을 했다.

해당 form의 input 중 모든 text type을 조회하여 

null value가 있을 경우 alert과 focus를 주기위해 

해당 id, label을 추출하고 true를 반환, 

null value가 존재하지 않으면 false를 반환하도록 만들어 보았다.

txtFieldCheck()가 true가 아닌경우 submit() 기능을 넣어주면 된다.

form

<form id="frm">

<label for="txt1">input_1</label><input type="text" id="txt1"/><br>

<label for="txt2">input_2</label><input type="text" id="txt2"/><br>

<label for="txt3">input_3</label><input type="text" id="txt3"/><br>

<label for="txt4">input_4</label><input type="text" id="txt4"/><br>

<input type="button" id="btn" value="click">

</form>

script

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// btn click

$("#btn").click(function(){

var result = txtFieldCheck() == true ? true : false;

console.log(result);

});

});

function txtFieldCheck(){

// form안의 모든 text type 조회

var txtEle = $("#frm input[type=text]");

  

for(var i = 0; i < txtEle.length; i ++){

// console.log($(txtEle[i]).val());

if("" == $(txtEle[i]).val() || null == $(txtEle[i]).val()){

var ele_id = $(txtEle[i]).attr("id");

var label_txt = $("label[for='" + ele_id +"']").text();

console.log("id : " + ele_id + ", label : " + label_txt);

showAlert(ele_id, label_txt);

return true;

}

}

}

function showAlert(ele_id, label_txt){

alert(label_txt + " is null");

// 해당 id에 focus.

$("#" + ele_id).focus();

}

</script>

function checkFields(){

var result = true;

var frm = $("#frm :input").not(":input[type=hidden]");

frm.each(function(idx, ele){

if("" == $(ele).attr("value")){

alert($(ele).attr("title") + "을(를) 입력하세요");

$(ele).focus();

result = false;

return false;

};

});

return result;

}