How to make an if argument on several inputs together?

Question

I have been trying to make an if argument that will check if several inputs(that have the same class) have a value of negative number on several. If one of them have, I want to have an error message. I have been trying to do so, and I got the error message that I wanted but it continues to the next step eventhough I wrote return and event.preventDefault. My Fiddle

My code below:

$("#inventoryForm").submit(function (event) {
          $(".inventoryInput").each(function(){
            if($(this).val() < 0) {
            event.preventDefault();
            $("#inventoryError").slideDown().text("blablabla");
            ;
            return;
            }
        });
});

Answer 1

Your problem comes from the rest of your code. event.preventDefault() will not return out of the submit handler, it will just prevent the default form submit behavior.

Here's what you can do:

$("#inventoryForm").submit(function (event) {
       var error = false;

       //You seem to always want to prevent the default behavior
       event.preventDefault();

          $(".inventoryInput").each(function(){
            if($(this).val() < 0) {

                error = true; //Indicate there was an error
                $("#inventoryError").slideDown().text("blablabla");
                return false; //This stops the iteration
            }

        });

        //Stop processing if there was an error
        if (error) return;

        $("#inventorySubmit").hide();
        $("#inventoryChange").show();
        $("#withdraw").show();
        $(".inventoryInput").attr('disabled','disabled');
        sum = 0;
         /* var money = table.find("td:nth-child(2)");
        for (var i = 0; i<money.length; i++) {

        }
        */
    });

Btw the code is even more consise without jQuery:

var inputs = [].slice.call(document.querySelectorAll('.inventoryInput'));

if (inputs.some(haveValueUnderZero)) {
    //error
}

function haveValueUnderZero(input) { return input.value < 0; }

Answer 2

Try this:

$("#inventoryForm").submit(function (event) {
    event.preventDefault();
    $(".inventoryInput").each(function () {
        if ($(this).val() < 0) {
            $("#inventoryError").slideDown().text("blablabla");
            return false;
        } else {
            $("#inventorySubmit").hide();
            $("#withdraw").show();
            return true;
        }
    });
});

Also, you need to insert other functions like $("#withdraw").show(); inside the else statement.

JSFiddle Demo

Answer 3

Try this:

<script>
      $(".inventoryInput").each(function(){
             var el = $(this)
            $("#inventoryForm").on("submit", function (event) {
            if(el.val() < 0) {

                $("#inventoryError").slideDown().text("blablabla");
                return false;
        }

    })
});

Answer 4

try a hidden verify function:

 window.verify = function() { var valid = true; $('input').each(function() { if ($(this).val() == "" || $(this).val() < 0) { valid = false; } }); if (valid) { $('#submit').click(); } else { alert("Please complete all fields."); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="inventoryForm"> <input type="text" placeholder="Product Id" name="prod_id" id="prod_id" /> <input type="number" placeholder="Quantity" name="quantity" id="quantity" /> <button type="button" onclick="verify()">Submit</button> <button id="submit" type="submit" style="display:none"></button> </form> 

Answer 5

You can use a filter function to return only elements that do not match your condition.

var hasErrorElements = $('.inventoryInput').filter(function() {
    return parseInt($(this).val()) < 0;
}).length > 0;

if (hasErrorElements) {
    alert('Error!');
    event.preventDefault();
    return false;
}