I keep getting "Uncaught TypeError: $(...).mask is not a function:

Question

Hello I keep getting an error when using the CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

It is for masking phone numbers and other fields in a form. Here are some functions where I am using these mask and unmask as well.

function phoneValidate(evt){
    var iKeyCode = (evt.which) ? evt.which : evt.keyCode
    var charStr = String.fromCharCode(iKeyCode);
    if(iKeyCode != 9){
        $("#phone").mask("(9?99) 999-9999");
    }
    return true;
}
function dobValidate(evt){
    var iKeyCode = (evt.which) ? evt.which : evt.keyCode
    var charStr = String.fromCharCode(iKeyCode);
    if(iKeyCode != 9){
        $("#dobpicker").mask("9?9/99/9999");
    }
    return true;
}
function dolValidate(evt){
    var iKeyCode = (evt.which) ? evt.which : evt.keyCode
    var charStr = String.fromCharCode(iKeyCode);
    if(iKeyCode != 9){
        $("#dolpicker").mask("9?9/99/9999");
    }
    return true;
}
function addHelpText(iActual){
    if(iActual == 'CUC_USER_PHONE'){
        if(document.getElementById("phone").value === '' || document.getElementById("phone").value === '(___) ___-____'){
            $("#phone").unmask("(9?99) 999-9999");
            document.getElementById("phone").value = '(xxx)xxx-xxxx';
            $("#phone").addClass("valColor");
        }
    }
    if(iActual == 'CUC_DATE_OF_BIRTH'){
        if(document.getElementById("dobpicker").value === '' || document.getElementById("dobpicker").value === '__/__/____'){
            $("#dobpicker").unmask("9?9/99/9999");
            document.getElementById("dobpicker").value = 'MM/DD/YYYY';
            $("#dobpicker").addClass("valColor");
        }
    }
    if(iActual == 'CUC_DATE_OF_LOSS'){
        if(document.getElementById("dolpicker").value === '' || document.getElementById("dolpicker").value === '__/__/____'){
            $("#dolpicker").unmask("9?9/99/9999");
            document.getElementById("dolpicker").value = 'MM/DD/YYYY';
            $("#dolpicker").addClass("valColor");
        }
    }
    if(iActual == 'CUC_USER_ZIPCODE'){
        if(document.getElementById("zip").value === '' || document.getElementById("zip").value === '______'){
            $("#zip").unmask("9?9999");
            document.getElementById("zip").value = 'Enter your zip code';
            $("#zip").addClass("valColor");
        }
    }
}
function removeHelpTxt(iActual){
    if(iActual == 'CUC_USER_PHONE'){
        if(document.getElementById("phone").value == '(xxx)xxx-xxxx'){
            document.getElementById("phone").value = '';
            document.getElementById("phone").style.color='';
            $("#phone").mask("(9?99) 999-9999");
            $("#phone").focus();
        }
    }

    if(iActual == 'CUC_DATE_OF_BIRTH'){
        if(document.getElementById("dobpicker").value == 'MM/DD/YYYY'){
            document.getElementById("dobpicker").value = '';
            document.getElementById("dobpicker").style.color='';
            $("#dobpicker").mask("9?9/99/9999");
            $("#dobpicker").focus();
        }
    }

    if(iActual == 'CUC_DATE_OF_LOSS'){
        if(document.getElementById("dolpicker").value == 'MM/DD/YYYY'){
            document.getElementById("dolpicker").value = '';
            document.getElementById("dolpicker").style.color='';
            $("#dolpicker").mask("9?9/99/9999");
            $("#dolpicker").focus();
        }
    }
    if(iActual == 'CUC_USER_ZIPCODE'){
        if(document.getElementById("zip").value == 'Enter your zip code'){
            document.getElementById("zip").value = '';
            document.getElementById("zip").style.color='';
            $("#zip").mask("9?9999");
            $("#zip").focus();
        }
    }

}

Any idea? conflict of jquery versions ?

Been struggling with it for several days, and is there another option instead of using mask.js?

I’m assuming you’ve ordered your scripts correctly, at the end of the document...? — Cue, Oct 01 '20 at 22:00
@cue I put the CDN in the footer and now it works. WTF. Thanks!! Any documentation where to read about the correct position for certain scripts? — developers, Oct 01 '20 at 22:10
@developers Here’s a good answer that will broaden the horizon on script placement https://stackoverflow.com/a/24070373/2150268 — Cue, Oct 01 '20 at 22:14

I keep getting "Uncaught TypeError: $(...).mask is not a function:

0 Answers0