Как отключить кнопку отправки на основе проверки полей полей ввода

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 пунктов в моей форме, так почему я использую массивы в имени атрибута)

Моя кнопка отправки, как это:

<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

Внутри вашей функции проверки проверьте значения всех входных тегов формы (а не только тег, который только что изменился).

Например (Update: 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"); 
    } 
}); 

Answer 3

Вы можете добавить пользовательский атрибут, например, 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"); 
     } 
    }