skip to Main Content

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


  1. 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 and digits-range-2-17 classes which is a magento validation rule.

    Login or Signup to reply.
  2. 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:

    $("#form").validate({
        rules: {
            rangeInputId: {
                range: [3, 10]
            }
        },
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search