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

score 1 · Accepted Answer · answered Jun 02 '14 at 13:43

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 02 '14 at 13:43

Simcha Khabinsky

1,970
2
19
34

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 https://www.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. – Frederick Andersen Jun 02 '14 at 14:10
1

`.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: http://stackoverflow.com/questions/3179385/val-doesnt-trigger-change-in-jquery – Simcha Khabinsky Jun 02 '14 at 14:20

score 1 · Answer 2 · answered Jun 02 '14 at 13:45

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 02 '14 at 13:45

Gaurang Tandon

6,504
11
47
84

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? – Frederick Andersen Jun 02 '14 at 14:58
@FrederickAndersen Once you are sure what the user entered is correct, you can write: `$("#error-box).html("");`, which empties the contents. – Gaurang Tandon Jun 02 '14 at 17:58

jQuery: Validation of Values in Input Fields

2 Answers2