How to disable submit button based on input field arrays validation

Question

I am making a form to order items stored in a database. Each item has an input field for the number of items that are to be ordered. The code for each item looks like this.

<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>

That HTML just gets added and repeated to the page dynamically from my database by PHP depending on how many items there are. (Right now they 113 items in my form, since why I'm using arrays in the name attribute)

My submit button is like this:

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

And my validation script is as follows:

$("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");      
    }
});

So what I want to do is that if any input field fail to meet the validation, to keep the submit button disabled. Right now it disables it if an input fails but if another similar input field is typed in after that and meets the validation then the submit button is enabled, even though the previous input failed it.

How can I keep track of the errors and disable the button if there are any and enable it once they're fixed.?

Nikhil Aggarwal · Accepted Answer · 2016-01-19 20:05:44Z

1

Try following

You can keep a map and store the validation failure result in that map.

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");  

    }
});

For reference - http://plnkr.co/edit/pnLssObOHquOAwwkmVbW?p=preview

edited Jan 19, 2016 at 20:05

answered Jan 19, 2016 at 19:59

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abetwothree Over a year ago

Ok, let me try that real quick.

Nikolay Ermakov · Accepted Answer · 2016-01-19 20:14:13Z

1

You can add a custom attribute, e.g. data-pass, as false when test is failed, e.g.:

    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");
       }  
    }

edited Jan 19, 2016 at 20:14

answered Jan 19, 2016 at 20:04

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

2 Comments

abetwothree Over a year ago

the problem is that all inputs don't have to be changed. I could maybe do the opposite and marked them as true from the start since they get a value 0 to start off, which is passes validation. If it fails validation then change the data-pass attribute to false.

abetwothree Over a year ago

Thank you for your help. I tried @nikhil idea of making a "map" and it worked. Thank you for your help nonetheless!

Simon Hi · Accepted Answer · 2016-01-19 22:29:43Z

0

Inside your validation function, check values of all input tags of the form (not only the tag that just changed).

For instance (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"); 
    }
});

edited Jan 19, 2016 at 22:29

answered Jan 19, 2016 at 19:57

Simon Hi

3,0261 gold badge19 silver badges19 bronze badges

4 Comments

abetwothree Over a year ago

The problem is that all inputs have the same name, are set to 0 by default when the PHP makes them and they all don't need to by changed. Only the items to be ordered would change.

Simon Hi Over a year ago

I am not sure to understand what you mean by "they all don't need to by changed". I added a code sample.

abetwothree Over a year ago

So basically it is a long form currently 113 input fields. They all have a starting value of 0 which can be changed to a higher value to order it. But they don't have to order every item and can just leave it as 0. So I had to keep track of which inputs were changed and if this change gave out an error. @nikhil posted a pretty nifty answer of using a "map" which worked. Thank you for your help nonetheless!

Simon Hi Over a year ago

Thanks for your answer!

Collectives™ on Stack Overflow

How to disable submit button based on input field arrays validation

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related