如何根据输入字段数组验证禁用提交按钮

Question

我正在制作一个表格来订购存储在数据库中的物品。每个项目都有一个输入字段，用于表示要订购的项目数量。每个项目的代码如下所示。

<div class="col-md-5">
    <label for="item13">409 Carpet Cleaner</label>
</div>
<div class="col-md-2" div="">
    <div class="has-success has-feedback">
        <input type="hidden" name="itemID[]" value="13">
        <input type="hidden" name="metaID[]" value="73">
        <input type="number" class="form-control" id="item13" name="quantity[]" min="0" max="10" value="0">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span id="inputSuccess2Status" class="sr-only">(success)</span>
    </div>
</div>
<div class="col-md-5">
    <span class="text-success"> X 1 case (12 aerosol cans)</span>
</div>

该 HTML 只是通过 PHP 从我的数据库中动态添加并重复到页面中，具体取决于有多少项目。 （现在我的表单中有 113 个项目，因为我在 name 属性中使用数组）

我的提交按钮是这样的：

<button type="button" class="btn btn-lg btn-success pull-right" id="submitOrder">Submit Order For Entire Store Location</button>

而我的验证脚本如下：

$("input[name='quantity[]']").on("keyup", function() {
    var value = $(this).val();
    var maxValue = $(this).attr('max');
    var minValue = $(this).attr('min');
    var itemID = $(this).attr('id');

    maxValue = parseInt(maxValue);
    minValue = parseInt(minValue);
    value = parseInt(value);

    //console.log("we was called " + minValue + " " + value + " " + maxValue + " " + itemID);

    if(value > maxValue || value < minValue){

        //console.log("wrong number");
        $("#submitOrder").attr("disabled", "disabled");
        $('#' + itemID).css("background-color","#f36e65");

    }else{
        $("#submitOrder").removeAttr("disabled");
        $('#' + itemID).css("background-color","#43C56D");      
    }
});

所以我想要做的是，如果任何输入字段未能满足验证，保持提交按钮禁用。现在，如果输入失败，它会禁用它，但如果在此之后输入另一个类似的输入字段并满足验证，则即使之前的输入失败，也会启用提交按钮。

如何跟踪错误并禁用按钮（如果有）并在修复后启用它。？

Answer 1

尝试关注

您可以保留一张地图并将验证失败结果存储在该地图中。

var map = {}; // map that stores validation failures
$("input[name='quantity[]']").on("keyup", function() {
    var value = $(this).val();
    var maxValue = $(this).attr('max');
    var minValue = $(this).attr('min');
    var itemID = $(this).attr('id');

    maxValue = parseInt(maxValue);
    minValue = parseInt(minValue);
    value = parseInt(value);

     if(value > maxValue || value < minValue){
        map[itemID] = false; // add validation failure result in map
        $("#submitOrder").attr("disabled", "disabled");
        $('#' + itemID).css("background-color","#f36e65");
    }else{
        delete map[itemID]; // delete validation failure result from map
        if(Object.keys(map).length === 0) { // If no validation error, remove disabled attribute
          $("#submitOrder").removeAttr("disabled");    
        }
        $('#' + itemID).css("background-color","#43C56D");  

    }
});

供参考 - http://plnkr.co/edit/pnLssObOHquOAwwkmVbW?p=preview

Answer 2

您可以添加自定义属性，例如data-pass，测试失败时为false，例如：

    if(value > maxValue || value < minValue){
       $("#submitOrder").attr("disabled", "disabled");
       $('#' + itemID).css("background-color","#f36e65");

       // write attribute to false
       $(this).attr('data-pass', false);

    } else {

       // write attribute to true
       $(this).attr('data-pass', true);

       // check all inputs don't have false values for that attribute
       if ( $('input[data-pass="false"]').length === 0 ) {
           $("#submitOrder").removeAttr("disabled");
           $('#' + itemID).css("background-color","#43C56D");
       }  
    }

Answer 3

在您的验证函数中，检查表单的所有输入标签的值（不仅仅是刚刚更改的标签）。

例如（更新：2016-01-19）：

$("input[name='quantity[]']").on("keyup", function() {
    var ok = true;
    var itemID = $(this).attr('id');
    $("input[name='quantity[]']").each(function(){
        var value = $(this).val();
        var maxValue = $(this).attr('max');
        var minValue = $(this).attr('min');
        maxValue = parseInt(maxValue);
        minValue = parseInt(minValue);
        value = parseInt(value);
        if ((value > maxValue) || (value < minValue)){
            ok = false;
            if ($(this).attr('id') == itemID){
                $('#' + itemID).css("background-color","#f36e65");
            }
        }else if ($(this).attr('id') == itemID){
            $('#' + itemID).css("background-color","#43C56D");
        }
    });
    if (ok){
        $("#submitOrder").removeAttr("disabled");
    }else{
        $("#submitOrder").attr("disabled", "disabled"); 
    }
});