jQuery - 행을 기준으로 행을 기반으로 제출 단추를 비활성화하는 방법

Question

나는 여러 행의 데이터가있는 테이블을 가지고 있습니다. 각 행은 자체 엔티티입니다. 모든 것이 하나의 형식과 관련이있는 것은 아닙니다. 내가 jQuery를 사용할 수있는 방법

http://jsfiddle.net/NmpaM/

말할 : 기본적으로 각 행은 형태의 해당 행, FNAME, LNAME 이메일은 비어 있지, 그리고 이메일이 유효합니다. 제출 단추를 사용하십시오. 그렇지 않은 경우 제출 버튼을 사용 중지 하시겠습니까?

목표는 사용자가 제출하도록 허용하기 전에 각 행이 유효한지 확인하는 것입니다. 그런 다음 제출 한 후 행을 제거하는 컨트롤이 있습니까?

생각

Answer 1

내가 그것을 할 거라고 방법 (jsfiddle.net/marke/mvBNS 참조)

jQuery(function() { 
    // You may want to use a different regular expression; 
    // this is just the first one I found on the 'net 
    var email_regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

    function validateRow(tr) { 
     var valid = true; 
     tr.find('input[type="text"]').each(function(i, el) { 
      if (!el.value.replace(' ', '')) return valid = false; 
      if (el.name == 'email' && !email_regex.test(el.value)) return valid = false; 
     }); 
     tr.find('input[type="submit"]').attr('disabled', valid? null : 'disabled'); 
    } 

    jQuery('tr').each(function(i, el) { 
     validateRow(jQuery(this)); 
    }).find('input[type="text"]').change(function() { 
     validateRow(jQuery(this).closest('tr')); 
    }); 
}); 

Answer 2

가 왜 검증하기 위해 PHP를 사용하지 않는 덕분에? 예

:

<table> 
<tr> 
<td> 
    <? if ($row['email'] != "") { echo "<form method='post' action='pageAct.php'> <input type='submit' name='x' value='y'> </form>"; } ?> 
</td> 
</tr> 
</table> 

및 수행하는 내부 루프 인스턴스있다.

Answer 3

기본적으로 찾고있는 것은 양식 유효성 검사입니다. 맞습니까? 당신이 찾고있는 행동을 구현할 수있는 jQuery 폼 유효성 검사 플러그인이 다양합니다. 각 필드에 대해 유효성 검사 규칙을 정의 할 수 있으며 해당 규칙이 통과하지 않으면 사용자가 양식을 제출할 수 없습니다. 이러한 유형의 동작은 거의 모든 jQuery 플러그인에서 공통적이어야합니다.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/으로 시작해야합니다. 다른 것들도 있습니다.

Answer 4

다른 답변에서 언급 한 것처럼 강력한 양식 유효성 검사 플러그인을 구현하지 않으려면이 게시물을 읽어야합니다. 사용이 code.I이 테이블에 ID를 준 http://jsfiddle.net/gnarf/NmpaM/3/

function checkForms() { 
    var rempty = /^\s*$/, 
     remail = /[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/, 
     // narrow the scope of the check when called as an event handler 
     check = (this.nodeType) ? $(this).closest('tr') : $('tr'); 

    check.each(function() { 
     var $row = $(this), 
      $inputs = $row.find("input.text_field"), 
      $btn = $row.find('input.button[name="commit"]'), 
      $email = $row.find('input[name="email"]'), 
      numempty = $inputs.filter(function() { 
       return rempty.test(this.value); 
      }).length; 

     if (numempty > 0 || !remail.test($email.val())) $btn.attr('disabled', 'disabled'); 
     else $btn.removeAttr('disabled'); 
    }); 
} 
checkForms(); 
// just so it updates everytime the input changes: 
$("input").bind('change keyup', checkForms); 

Answer 5

이

var tbody = $('#tableId'); 
    var trs = tbody.children(); 
    var row = 0; 
    for (row = 0; row < trs.length; row++) { 
     var txts = trs[row].getElementsByTagName('input'); 
     var isFilled=false; 
     for (i = 0; i < txts.length; i++) { 
      if(txts[i].type=='text'){ 
      isFilled=checkRequired(txts[i]) && isFilled 
       } 
     } 

     if(isFilled){ 
     trs[row].getElementsByTagName('input'); 
      for (i = 0; i < txts.length; i++) { 
      if(txts[i].type=='submit'){ 
        txts[i].enabled=true;//set your css values here 
       } 
     } 


     } 

    } 


function checkRequired(o) { 
    if (o.value== null || o.value =='') { 

     return false; 
    } else { 

     return true; 
    } 
} 

Answer 6

복사를 확인하고 그에 자바 스크립트 콘솔에이를 붙여 :

당신이 뭔가를 할 수 있습니다 프레임과 당신이 갈 수있을거야. http://fiddle.jshell.net/NmpaM/show/

valid_email_regx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

// add change event to each text box 
$("table :text").change(function(){ 

    // Select every field in row 
    $(this).parents("tr").find(":text").each(function(index){ 

     // If field fails validation, disable field and exit loop 
     if($(this).val() == '' || ($(this).attr("id") == "email" && !valid_email_regx.test($(this).val()))){ 
      $(this).parents("tr").find(":submit").attr("disabled", true); 
      return false; 
     }else 
      $(this).parents("tr").find(":submit").attr("disabled", false); 
    }) 

}); 

// Add this to $(document).ready() to initally run function 
$("table :text").change() 

는 (당신은 특정 ID에 "표"를 변경할 수 있습니다.)

여기