Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery Masked Input plugin doesn't work

I've added a JQuery Masked Input plugin to my Web project but it's not working at all.

The plugin can be found here: http://digitalbush.com/projects/masked-input-plugin

I've included JQuery libray and the Masked Input plugin to my JSP, and called the mask function for my html <input> element:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- JS --->
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/masked-input-jquery-1.3.1.js"></script>

    <title>Test</title>
</head>
<body>

    <script type="text/javascript">
       $("#name").mask("99/99/9999");

    </script>

    <form id="" method="" action="">
    <div>
       <label for="name">
          Name<b style="color: red">*</b>
       </label>
       <input name="studentName" maxlength="255" autofocus="autofocus" type="text" id="name"/> 
......

When I access my JSP, even before typing anything on the text field, the following appears on Chrome console:

Uncaught ReferenceError: iMask is not defined

Can you help me? Is there anything wrong with the code?

like image 335
Dark Defender Avatar asked Dec 09 '22 09:12

Dark Defender


1 Answers

This may or may not fix your current problem, but your call to .mask will not work because it runs before the rest of the page (where your input fields are) is parsed.

You need to wrap the call in the jQuery document ready function:

$('document').ready(function() {
    $("#name").mask("99/99/9999");
});

This tells the script to wait until the page is loaded enough for the browser to know about the input fields in the document.

As an additional comment best practices say to put all script tags (with some exceptions) just before the closing body tag. Otherwise you should move the script tag into the head with the rest of the tags.

like image 166
HJ05 Avatar answered Dec 11 '22 00:12

HJ05