테이블의 모든 텍스트 상자를 반복하고 필수 값을 확인하십시오.

Question

텍스트 필드가 포함 된 3 열과 10 행의 테이블이 있습니다. 셀에 값을 추가하면 해당 행의 첫 번째 열 필드는 필수 항목이며 텍스트가 없으면 "열 1에 값을 추가하십시오."와 같은 오류 메시지가 표시되고 프로그램이 입력을 수정하기 위해 일시 ​​중지됩니다 . jQuery를 사용하여 어떻게 이것을 할 수 있습니까?

내 샘플 코드 :

$(function() {$("#mySubmit").click(function(event) { 

$('#myTable tr').each(function(event) { 
    if ($(this).find("td:first").length > 0) { 
     var firstColumn  = $(this).find("td input").eq(0).val(); 
     var secondColumn = $(this).find("td input").eq(1).val(); 
     if (typeof (secondColumn) != "undefined") { 
       var lengthOfSecondColumn = secondColumn.length; 
       var lengthOfFirstColumn = firstColumn.length; 

       alert(lengthOfFirstColumn + ' ' + lengthOfSecondColumn) 

       if (lengthOfSecondColumn > 0) { 

        if(lengthOfFirstColumn < 1){ 
         alert('Please add value in first column'); 
         event.preventDefault(); 
        }    
       } 
     }          
    } 
}); 

    $.ajax({ 
    type : "POST", 
    url : "updateURL", 
    data : dataString, 
    success : function(data) { 
     if (data.checkingStatus == 0) { 
      alert("updated"); 
     } 

     else (data.checkingStatus == -1) { 
      alert("..."); 
     } 
    } 
    }); 

}); 

나는이 일을 시도했다. 하지만 그것은 실행되고 사용자 정의 오류 처리 페이지로 리디렉션됩니다.

Answer 1

이 시도 :

$(function() {$("#mySubmit").click(function(event) { 
var valid = true; // Add a variable 

$('#myTable tr').each(function() { // remove 'event' 
    if ($(this).find("td:first").length > 0) { 
     var firstColumn  = $(this).find("td input").eq(0).val(); 
     var secondColumn = $(this).find("td input").eq(1).val(); 
     if (typeof (secondColumn) != "undefined") { 
       var lengthOfSecondColumn = secondColumn.length; 
       var lengthOfFirstColumn = firstColumn.length; 

       alert(lengthOfFirstColumn + ' ' + lengthOfSecondColumn) 

       if (lengthOfSecondColumn > 0) { 

        if(lengthOfFirstColumn < 1){ 
         alert('Please add value in first column'); 
         event.preventDefault(); 
         valid = false; //set variable to false if there was a problem 
         return false; //exit the loop; 
        }    
       } 
     }          
    } 
}); 
    if(valid) { //Only if form is valid 
     $.ajax({ 
     type : "POST", 
     url : "updateURL", 
     data : dataString, 
     success : function(data) { 
      if (data.checkingStatus == 0) { 
       alert("updated"); 
      } 

      else (data.checkingStatus == -1) { 
       alert("..."); 
      } 
     } 
     }); 
    } 
});