jQuery - 給出一個表的行如何禁用基於行的提交按鈕

Question

我有一個包含多行數據的表。每一行都是它自己的實體。它並不全都與一種形式相關聯。從本質上講每一行是一個形式：

http://jsfiddle.net/NmpaM/

我如何使用jQuery說：該行，如果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

如果您正在避免實現其他答案中提到的一些已經很強大的表單驗證插件，那麼您應該只是真的很討厭閱讀這篇文章。

你可以做這樣的事情：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

使用此code.I給一個ID表，以確定它

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

複製並粘貼到上一個JavaScript控制檯框架，你會很好去。 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。）