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只是根据有多少项而动态地从我的数据库中添加并重复到页面。（现在他们在我的表单中有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"); 
    }
});

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

3 个答案: