I have a range slider with a code below
<div class="slidecontainer">
<input name="am_giftcard_amount_slider" id="am_giftcard_amount_slider" type="range" min="0" value="13" max="27" step="1" class="gg-slider validate-range range-0-27">
</div>
Now I’ve been getting this error
`Please enter a value between NaN and NaN`
Now I tried to debug this and went to modify the file in lib/web/mage/validation.js
now under the function validate-range
I added a hardcode value of True just to make debug and know if the response is true if the error message still appear. But after adding the return true
the error message is still displaying. I’m looking at this error
'validate-range': [
function (v, elm) {
var minValue, maxValue, ranges, reRange, result, values,
i, name, validRange, minValidRange, maxValidRange;
if ($.mage.isEmptyNoTrim(v)) {
return true;
} else if ($.validator.methods['validate-digits'] && $.validator.methods['validate-digits'](v)) {
minValue = maxValue = $.mage.parseNumber(v);
} else {
ranges = /^(-?d+)?-(-?d+)?$/.exec(v);
if (ranges) {
minValue = $.mage.parseNumber(ranges[1]);
maxValue = $.mage.parseNumber(ranges[2]);
if (minValue > maxValue) { //eslint-disable-line max-depth
return false;
}
} else {
return false;
}
}
reRange = /^range-(-?d+)?-(-?d+)?$/;
result = true;
values = $(elm).prop('class').split(' ');
for (i = values.length - 1; i >= 0; i--) {
name = values[i];
validRange = reRange.exec(name);
if (validRange) {
minValidRange = $.mage.parseNumber(validRange[1]);
maxValidRange = $.mage.parseNumber(validRange[2]);
result = result &&
(isNaN(minValidRange) || minValue >= minValidRange) &&
(isNaN(maxValidRange) || maxValue <= maxValidRange);
}
}
return result;
},
$.mage.__('The value is not within the specified range.')
],
Not sure why even though I added the return true the error validation is still displaying. Can anyone tell me where I can debug and how to turn this off? I’m basically clueless now on where to look for because I already modified the js but it is still throwing this error. Any idea on how to debug this please and is there any error in my code?
Note: I didn’t modify or add any JQuery Slider initialization I just added the HTML markup for slider
Update:
I tried this code
<div class="slidecontainer">
<input name="am_giftcard_amount_slider" id="am_giftcard_amount_slider" type="range" min="0" digits="true" value="13" max="27" range="2,17" step="1" class="gg-slider ignore">
</div>
After I place the range="2,17"
I got this error
`Please enter a value between 2 and NaN`
I know I put 2 instead of 0 for the minimum. I intentionally made it so that I will know if it’s actually retrieving the correct parameter. Now based on this. It was able to get 2
as the minimum but why is the max 17
not being read?
2
Answers
It seems that the message
Please enter a value between NaN and NaN
is from jquery validation system not magento one because magento only return this message : "The value is not within the specified range.".You should considere using the
validate-digits-range
anddigits-range-2-17
classes which is a magento validation rule.For anyone else getting
Please enter a value between NaN and NaN range validation
error from Jquery Validation, you need to setup validate function for range input validation rule properly before validating.In my case: