CODEWITHSUNDEEP
jqueryvalidationinput
Marco Virgo
Marco Virgo

Reputation: 11

validate again fields after one of them changes

I'm having some issues on re-validating fields when one of them changes. To be more specific, suppose you have to handle any number of field (the user can add news or delete existing ones) which sum can't be more than 100.

What I'm doing now is:

//This basically works on change of the input
$.validator.addMethod('inputBox', checkAmount, 'Value exceeds maximum quantity');

function checkAmount(value, element) {

    if (sumAmounts() <= 100) {
        return true;
    }
    return false;
}

Here's how it works, let's suppose that we've got 2 inputBoxes: - I put 80 in the 1st one - I put 30 in the 2nd one - the 2nd becomes red and displays the error 'Value exceeds max quantity' <- fine for me! - I press Submit: both become red and display the error <- fine for me! - I edit one of the two (it makes no difference which one) to fit the validation rule - The edited one becomes valid, but the other still displays the error (but i can submit) <- here's the problem!

I want ALL the boxes to become "valid" when I change one of them and their values' sum becomes less than 100.

I tried to insert in the checkAmount() function the following methods before returning true or false: $('inputBox').validate() / .valid(); / .change(); / $('form').validate(); / and even $('inputBox').focus(); which works but goes through an infinite loop xD

Any suggestion?

Upvotes: 1

Views: 971

Answers (2)

Ameam
Ameam

Reputation: 11

It doesn't work since it's not the current box that present the problem, but the others that have the same validation rule

Upvotes: 1

gaurang171
gaurang171

Reputation: 9080

You can add css class on each input box element say "inputclass" and apply following jQuery script. May be it work on it..

$(function(){
    $(".inputclass").change(function(){
          $(this).validate();
     });
});

Upvotes: 0

Related Questions