[jQuery] input 배열 값 수동으로 유효성 검사(validation) 하기 (코드예시)

동적으로 행의 개수가 바뀌는 테이블이나 테이블 안의 input 태그들의 name을 같게 하여 backend로 전송할 값의 형태를 배열로 만들 때 그냥 jquery.validate.js 를 사용하면 첫행만 유효성 검사를 하거나 다른 행의 오류가 첫행에 표시가 되는 등의 버그가 있어서 수동으로 validation을 해줄 필요가 생겼는데 스택오버플로우에서 발견한 쓰레드!

생각해보면 로직은 간단하지만 jquery.validate.js 에만 익숙해져있다면 다소 생소할지도?!

[HTML]

<table style="width:100%" border="1">
  <tr>
    <th>Date</th>
    <th>Points</th> 
    <th>Result</th>
  </tr>
  <tr>
    <td><input type="text" name="date[]" class="date" value="2016-09-02" /></td>
    <td><input type="text" name="points[]" class="points" /></td>
    <td>false(error)</td>
  </tr>
  <tr>
    <td><input type="text" name="date[]" class="date" /></td>
    <td><input type="text" name="points[]" class="points" value="679" /></td>
    <td>false(error)</td>
  </tr>
  <tr>
    <td><input type="text" name="date[]" class="date" value="2016-09-02"/></td>
    <td><input type="text" name="points[]" class="points" value="679" /></td>
    <td>true</td>
  </tr>
  <tr>
    <td><input type="text" name="date[]" class="date" /></td>
    <td><input type="text" name="points[]" class="points" /></td>
    <td>true</td>
  </tr>
</table>

[JS]

$(document).ready(function() {
  $("table tr").each(function () {
  		$inputarray = $(this).find("input");
      $length = $inputarray.size();
      if($length>0){
      $i = 0;
        $inputarray.each(function() {
          if(this.value!=="") {
          	$i++;
          }
        });
        if($i===0 || $i===$length){
        	$(this).find( "td:last" ).text("true");
        } else {
        	$(this).find( "td:last" ).text("false");
        }
      }    
  });
});

[Reference]

http://stackoverflow.com/questions/42069401/jquery-validate-input-fields-in-table-cells

https://jsfiddle.net/51bz8ggv/2/

https://jsfiddle.net/51bz8ggv/5/

위 코드와 jQuery.each 문을 이용하여 정규식으로 값을 validation 할 수도 있다.

아래는 수동으로 유효성 검사를 하는 내가 짠 코드.

/** 학력사항 Validation */
$('#table').find('tbody').find('tr').each(function(index, element) {
    console.log('### index : ' + index + 'start ###');

    /** 학력 사항 테이블 전체 input 빈 문자열 및 required 체크 */
    $inputArray = $(this).find('input:text');
    $length = $inputArray.size();
    if($length > 0) {
        var $i = 0;
        $inputArray.each(function() {
            if(this.value !== "") {
                $i++;
            }
        });
        if($i === 0 || $i === $length) {
        } else {
            alert("학력사항을 다시 한번 확인해주세요.");
            return false;
        }
    }

    /**
     * @체크해야할 값
     *
     * @variable $schName, $subjStdNm, $dgrNm
     * @rule length 50
     *
     * @variable $entDate, $grdDate
     * @rule only digits with length 8
     *
     * @variable $grdScore
     * @rule only digits with decimal part(period would be OK)
     *
     * */
    var $schNm = $(this).find('input[name=SCH_NM]').val();
    if( $schNm.length > 50 ) {
        alert("!!");
        return false;
    }

    var $subjStdNm = $(this).find('input[name=SUBJ_STD_NM]').val();
    if( $subjStdNm.length > 50 ) {
        alert("!!");
        return false;
    }

    var $dgrNm = $(this).find('input[name=DGR_NM]').val();
    if( $dgrNm.length > 50 ) {
        alert("!!");
        return false;
    }

    var $entDate = $(this).find('input[name=ENT_DATE]').val();
    var $grdDate = $(this).find('input[name=GRD_DATE]').val();
    var numCheck = /^[0-9]*$/;
    if( $entDate !== "" ) {
        if( !(numCheck.test($entDate) && $entDate.length === 8) ) {
            alert("!!");
            return false;
        }
    }
    if( $grdDate !== "" ) {
        if( !(numCheck.test($grdDate) && $grdDate.length === 8) ) {
            alert("!!");
            return false;
        }
    }

    var $grdScore = $(this).find('input[name=GRD_SCORE]').val();
    var decimalCheck = /^(\d{1,3}([.]\d{0,2})?)?$/;
    if( !decimalCheck.test($grdScore) ) {
        alert("!!");
        return false;
    }
    console.log('### index : ' + index + 'end ###');
});