jQuery: Validation of Values in Input Fields

Question

I'm building a form.

I have two input fields (#totalIncome and #totalExpenses). I need to confirm that the value of those two fields equal the equation #totalIncome > #totalExpenses before the user will be able to send the form. I'm struggling with the jQuery.

If #totalIncome isn't greater than #totalExpenses I want to display an error message in the #validation div (for this example it should display "Income is lower than expenses"). I also want to disable the submit button, #submit-suggestion.

If #totalIncome actually is greater than #totalExpenses I simply want the #submit-suggestion-button to be functional.

This is my code so far:

$('#validation').change(function() {
    if ($('#totalIncome').val() < $('#totalExpenses').val()) {
        $('#validation').val('Income is lower than expenses.')
        $('#submit-suggestion').prop("disabled", true);
    } else {
        $('#submit-suggestion').prop("disabled", false);
    }
});

Simcha Khabinsky · Accepted Answer · 2014-06-02 13:43:53Z

1

$('#totalIncome, #totalExpenses').change(function() {
    if (parseFloat($('#totalIncome').val()) < parseFloat($('#totalExpenses').val())) {
        $('#validation').val('Income is lower than expenses.')
        $('#submit-suggestion').prop("disabled", true);
    } else {
        $('#submit-suggestion').prop("disabled", false);
    }
});

answered Jun 2, 2014 at 13:43

Simcha Khabinsky

2,0392 gold badges20 silver badges35 bronze badges

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

2 Comments

Frederick Andersen Over a year ago

Hey Simcha, thanks for the response, however, it doesn't seem to work. I'm sure I've done something wrong, but would you mind taking a look at the page, where I'm actually doing the testing? It's at daccusa.org/suggest. I've implemented your code. The #totalIncome and #totalExpenses are located at the bottom and the values are determined by the costs, participants and ticket prices.

Simcha Khabinsky Over a year ago

.val() doesn't trigger change. After you programmatically change the values of #totalIncome and #totalExpenses, use $("#totalIncome ").trigger("change") or $("#totalExpenses").trigger("change") . Read more about this here: stackoverflow.com/questions/3179385/…

Gaurang Tandon · Accepted Answer · 2014-06-02 13:45:28Z

1

You should use parseFloat to get the decimal value of the input.

if ( parseFloat($('#totalIncome').val()) 
                    < parseFloat($('#totalExpenses').val())) {

And to display an error, you may have initially a blank p element, and then, to show error, set its innerHTML to "Error!Error!". Something like:

else {
    $('#submit-suggestion').prop("disabled", false);
    $('#error-box').html("Error!"); 
    // or $('#error-box')[0].innerHTML = "Error";
}

Also, instead of listening to the change event, you might want to fire the validation function onclick of a button.

answered Jun 2, 2014 at 13:45

Gaurang Tandon

6,88911 gold badges52 silver badges96 bronze badges

2 Comments

Frederick Andersen Over a year ago

The $('#error-box').html("Error!"); is great! However, if I change the values, it will still say error. How can I implement some sort of toggle on it - do you know?

Gaurang Tandon Over a year ago

@FrederickAndersen Once you are sure what the user entered is correct, you can write: $("#error-box).html("");, which empties the contents.

Collectives™ on Stack Overflow

jQuery: Validation of Values in Input Fields

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related