ParsleyJS Custom Math Validators - parsley.js

Question

I've successfully adapted parts of ParsleyJS to my needs in my form. Now I need to make some custom math validators, but I am struggling to figure out why my validators are not working.
What I need to accomplish:
Input 1: x
Input 2: can not be more than 10 different from x
an example form:
<form id="demo-form" data-parsley-validate="">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1" name="input1" required>
<label for="input2">Input 2</label>
<input type="text" class="form-control" id="input2" name="input2" required data-parsley-not-more-than="input1" data-parsley-trigger="keyup" data-parsley-validation-threshold="0">
<input type="submit" class="btn btn-default pull-right">
</form>
from the custom validator demo example I figured it'd be solved pretty easily like so:
window.Parsley.addValidator('notMoreThan', {
validateNumber: function(value, requirement) {
return (value - requirement) <= 10;
},
requirementType: 'integer',
messages: {
en: 'This value can not be more than 10 different from %s'
}
});
but.. Uncaught Requirement is not a integer: "input1"
fine. we'll change to a string then.
window.Parsley.addValidator('notMoreThan', {
validateNumber: function(value, requirement) {
return (requirement - value) <= 10;
},
requirementType: 'string',
messages: {
en: 'This value can not be more than 10 different from %s'
}
});
but this always returns false, validation fails, whatever the input is.
then I look at the extras (greater than, less than or equal to) in the src/extra directory and they do this:
// gt, gte, lt, lte, notequalto extra validators
var parseRequirement = function (requirement) {
if (isNaN(+requirement))
return parseFloat(jQuery(requirement).val());
else
return +requirement;
};
// Greater than or equal to validator
window.Parsley.addValidator('gte', {
validateString: function (value, requirement) {
return parseFloat(value) >= parseRequirement(requirement);
},
priority: 32
});
So I guess, with my limited javascript knowledge, that they "interpret" the requirement value to return the right string if it's "not a number".
So, I try the same approach.
// gt, gte, lt, lte, notequalto extra validators
var parseRequirement = function (requirement) {
if (isNaN(+requirement))
return parseFloat(jQuery(requirement).val());
else
return +requirement;
};
// my not more than 10 different validator
window.Parsley.addValidator('notMoreThan', {
validateString: function (value, requirement) {
return ( parseFloat(value) - parseRequirement(requirement) ) <= 10;
},
priority: 32
});
But this always returns false as well.
I'm just at a complete loss. It may be my lack of javascript skills.. Hope this answer doesn't get downvoted for that. I'm trying to learn as best I can.
In conclusion, I need a solution to craft custom validators with simple math validations depending on fields. "Field B can be no more than X different from Field A" "Field D can not differ more than f from ((Field C divided by x) minus y)" and so on so on.
Hope someone can help me out.

Answer 1

I found out the solution, hope it helps people who face similar issues, as documentation is lacking for newbies in this regard.
window.Parsley.addValidator('notMoreThan', {
validateNumber: function(value, requirement) {
// requirement is passing the id of the input 1 so ve have to obtain the value of it
var requirement_value = $('#'+requirement).val() ;
return value - requirement_value <= 10 ;
},
requirementType: 'string',
messages: {
en: 'This value can not be more than 10 different from %s'
}
});
in order to make this work, we have to obtain the value of the requirement first. This is what was lacking.