Validating a linked field in Parsley.js - parsley.js

Question

This question was asked by "jackrugile" on Github but I can't located the answer if it was ever given. I'm reposting here because having the exact same issue:
When using validation constraints that are linked to other fields (Equal To, Greater Than, Less Than, Before Date, After Date, etc.), whatever triggers a validation call on one field should automatically be called on the other. This is only applicable for triggers other than a submit (focusin, focusout, keydown, keyup, etc.)
For example, if I have a field called "Small Number" and a field called "Large Number", I would add the data-greaterthan attribute to the "Large Number" input to make sure it was larger. I then fill out the field as follows:
Small Number: 12
Large Number: 7
This validation obviously fails and an error shows up on on the "Large Number" field. Then, to fix this error, instead of making the "Large Number" larger than 12, I make the "Small Number" less than 7. The state of the form is now:
Small Number: 5
Large Number: 7
However, even though this should pass immediately because it is within the validation rules, it does not remove the error because no check was performed on "Large Number" again after changing "Small Number".
What is the best solution for this?

Answer 1

As far as I can tell, in Parsley 2.1 (current version), this is not supported. However, we can add the functionality by listening on the parsley events that are fired. I think there are a number of ways you could go about this. I have chosen to do it on field initialization. When a field is initialized, if it has a validator that depends on another field, I add a listener to that field, such that when that field changes, I re-execute my validation. Here is an example:
/**
* For fields that have a comparison to another field,
* setup a listener so that when one field changes, both
* fields re-validate.
*/
$.listen('parsley:field:init', function(e) {
var comparisonFields = ['gte', 'gt', 'lte', 'lt'];
for (var i = 0; i < comparisonFields.length; i++) {
if (e.OptionsFactory.fieldOptions[comparisonFields[i]]) {
$(e.OptionsFactory.fieldOptions[comparisonFields[i]]).on(e.OptionsFactory.staticOptions.trigger, function() {
$(e.$element).parsley().validate();
})
}
}
});
Note that if you add a listener on any init events, the code must come before you initialize your parsley form.