Firefox seem to parse int values wrong - whats wrong with my script?

Question

I have some sort of spaghetti code in a file. The file itself contains the input field for the Date of Birth (DOB).

The script work fine on Chrome and IE11, however it doesn't work on Firefox.

There's a bug where you need to pass a second parameter to parseInt(), but then I lose option validate the date. Therefore I need help to either cleanly parse numbers and put them together to a date-string.

I debugged it a little and found out that in FF there is no console log, whilst it clearly should do so. Basically, it seems that FF gets stuck somewhere, but I have no idea where and why.

Purpose of this script is to validate that the entered Values are either INT and combined verify the age of a customer (basically I want to check if he is 18 or not - based on 3 inputs, Day, Month, Year).

<script type="text/javascript">
//<![CDATA[
    var customer_dob = new Varien.DOB('.customer-dob', <?php echo $this->isRequired() ? 'true' : 'false' ?>, '<?php echo $this->getDateFormat() ?>');
    jQuery(document).ready(function($){ 
        var sPath = window.location.pathname;

        // OPTION 1: /customer/account/create/
        // OPTION 2: /onestepcheckout/
        // OPTION 3: /customer/account/edit/

        console.log(sPath);

        var age = [];

        if(sPath == "/onestepcheckout/"){
            var disButID = "#onestepcheckout-place-order";
        } else if (sPath == "/customer/account/create/") {
            var disButID = ".buttons-set button.button";
        } else if (sPath == "/customer/account/edit/") {
            var disButID = ".buttons-set button.button";
        }

        //console.log(disButID);

        //jQuery(disButID).prop("disabled", true);

        jQuery(".customer-dob input").each(function($){
            var entity = jQuery(this).attr("name");
            //console.log(entity);
            if(entity == "day" || entity == "month" || entity == "year"){
                var selector = jQuery(this).attr("data-selector");
                age[selector] = jQuery(this).val();
                getAge(age);
                //console.log("Change check: " + age);
            } else if (entity == "dob") {
                // ... 
            }
        });

        jQuery(".customer-dob input").change(function($){
            var selector = jQuery(this).attr("data-selector");
            age[selector] = jQuery(this).val();
            getAge(age);
            //console.log("Change check: " + age);
        });

        function getAge(age) {
            if(age["d"] && age["m"] && age["y"]){
                var day = age["d"];
                var month = age["m"];
                var year = age["y"];
                console.log("Date: " + day, month, year);

                unlockOrderButton(day, month, year);

            } else {
                // ... 
                //console.log(age.length);
            }
        }

        function unlockOrderButton(day, month, year){

            var dateString = parseInt(month) + "-" + parseInt(day) + "-" + parseInt(year);
            var today = new Date();
            var birthDate = new Date(dateString);
            var currentAge = today.getFullYear() - birthDate.getFullYear();
            var m = today.getMonth() - birthDate.getMonth();

            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                currentAge--;
            } else {
                currentAge;
            }


            //var age = parseInt(curr);

            console.log(parseInt(currentAge));
            console.log("Unlock Button - Check");
            if(currentAge >= 18){
                jQuery(".customer-dob-error").removeClass("active");
                jQuery(disButID).prop("disabled", false);
                console.log("Unlock Button - Success. Age is: " + currentAge);
            } else {
                jQuery(".customer-dob-error").addClass("active");
                jQuery(disButID).prop("disabled", true);
                console.debug("Unlock Button - Fail. Age is: " + currentAge);
            }
        }
    });
    //]]>
</script>

HTML Code:

<div class="input-box customer-dob">
    <div class="dob-day">
             <input type="text" data-selector="d" id="billing:day" name="billing[day]" value="" title="Tag" class="input-text validate-custom">
             <label for="billing:day">TT</label>
         </div><div class="dob-month">
             <input type="text" data-selector="m" id="billing:month" name="billing[month]" value="" title="Monat" class="input-text validate-custom">
             <label for="billing:month">MM</label>
         </div><div class="dob-year">
             <input type="text" data-selector="y" id="billing:year" name="billing[year]" value="" title="Jahr" class="input-text validate-custom" autocomplete="off">
             <label for="billing:year">JJJJ</label>
         </div>    
    <div class="dob-full" style="display:none;">
        <input type="hidden" id="billing:dob" name="billing[dob]">
    </div>

    <div class="validation-advice" style="display:none;"></div>
</div>

Firebug fails to show console's content, so I checked the built-in console.

Date: 17 02 1950  onestepcheckout:1073:5
Unlock Button - Check  onestepcheckout:1096:4
Unlock Button - Fail. Age is: NaN  onestepcheckout:1104:5

You mean nothing at all is logged to the console? Does `getAge` run? Add a breakpoint. — Ry-, Apr 10 '17 at 08:05
Nothing at all gets logged, yes. Not even `sPath` gets logged, so it seems that FF can't load jQuery which is my first guess, but wrong - since everything else works fine. — Atr_Max, Apr 10 '17 at 08:08
Unrelated to your issue, but you don't need to `parseInt` the `currentAge` value. Also, the `else { currentAge; }` can be removed completely. — Cerbrus, Apr 10 '17 at 08:09
That's... weird. If you included jQuery, you should at least get `sPath` logged. If you didn't include jQuery properly, you should be getting errors about `jQuery` not existing. What if you add a `console.log(customer_dob)` directly after the `var customer_dob`? — Cerbrus, Apr 10 '17 at 08:15
Nothing at all. Maybe its a Firebug bug? Anyhow, it seems that jQuery triggers just fine, since jQuery is able to trigger `.customer-dob-error` as statet in the last `else` in my code. — Atr_Max, Apr 10 '17 at 08:25
Try with the built-in Firefox developer tools, sans Firebug. — Ry-, Apr 10 '17 at 08:25
Gotcha, Ryan. Here we have output. I gonna paste the content of it into the question. — Atr_Max, Apr 10 '17 at 08:27
Possible duplicate of [Javascript parseInt() with leading zeros](http://stackoverflow.com/questions/8763396/javascript-parseint-with-leading-zeros) — freedomn-m, Apr 10 '17 at 08:44
Tried `parseInt(month, 10)` on function `unlockOrderButton`, but this seems not to work. — Atr_Max, Apr 10 '17 at 08:47

score 0 · Answer 1 · edited Oct 07 '21 at 11:10

The problem is that you are formatting your date string as MM-DD-YYYY. When using a date string, Date.parse expects a RFC2822 formatted date. Browsers often recognize other formats but support for them is not uniform or consistent. Chrome recognizes MM-DD-YYYY, but Firefox does not. Go to the console in Firefox and type in new Date('01-01-2017'), it will return Invalid Date. Calling .getFullYear() on an invalid date object returns NaN subtracting NaN from the current year returns NaN. So, that is why currentAge is NaN when your code runs in Firefox.

As of ES5, JavaScript now officially supports the ISO-8601 format for date strings, so if you switch your date string fromatting to YYYY-MM-DD, it should work across all browsers.

var dateString = parseInt(year, 10) + "-" + parseInt(month, 10) + "-" + parseInt(day, 10);

Also, `age` [should be an object](https://andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/), not an array. `var age = {}`. In JS arrays are not associative arrays, are meant only for use with numeric indices. In JS objects are analogous to associative arrays, so use an object instead when using non-numeric property names. Arrays are themselves objects, which is why adding properties to them works, but it is not the way you should be doing it. — Useless Code, Apr 10 '17 at 11:45

Firefox seem to parse int values wrong - whats wrong with my script?

1 Answers1