Question

我有一个包含多行数据的表。每一行都是它自己的实体。它并非都与一种形式相关联。基本上每行都是一个表格：

如何使用jQuery说：对于该行，如果fName，lName和email不是空白，并且电子邮件有效。启用提交按钮。如果没有，请禁用提交按钮？

目标是在允许用户提交之前确保每一行都有效。然后提交后，控制删除行？

感谢谢谢

Answer 1

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

您基本上寻找的是表单验证，对吗？有各种各样的jQuery表单验证插件可以实现您正在寻找的行为。您可以为每个字段定义验证规则，如果这些规则未通过，则用户将无法提交表单。这种行为应该在你使用的几乎任何jQuery插件中都很常见。

http://bassistance.de/jquery-plugins/jquery-plugin-validation/应该让你入门。还有其他人。

Answer 3

将其复制并粘贴到该框架上的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。）

Answer 4

使用此代码。我已向表格提供了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 5

如果你正在避免实现其他答案中提到的一些已经很强大的表单验证插件，你应该真的很费心阅读这篇文章。

您可以执行以下操作：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 6

为什么不使用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>

例如，

并在循环中执行此操作。

jQuery - 给定一个行表，如何根据行禁用Submit按钮

6 个答案: