4

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?

Dark Defender
  • 273
  • 2
  • 4
  • 9
  • 2
    I don't think it will fix your current problem, but your call to .mask will not work because it runs before the rest of the page is parsed. You need to wrap the call in the jQuery document ready function: $(document).ready(function(){... your code here ... }); – HJ05 Feb 24 '14 at 22:05
  • Wrapping in document.ready should actually fix the problem. jQuery and the mask plugin have executed since they are in the head. But when you do $('#name').mask(...) it selects nothing. It's possible that calling .mask on the plugin before document ready means mask hasn't loaded everything it needs yet. Even if you didn't get that error it still wouldn't work because you need $('#name') to select a dom element that has not yet been created. – Matt Pileggi Feb 24 '14 at 22:18
  • @HJ05 you should post it as an answer so the OP can accept it and upvote it. – Ilan Biala Feb 25 '14 at 00:03

3 Answers3

11

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.

HJ05
  • 1,358
  • 2
  • 11
  • 23
  • Yes, I wrapped the call and it worked perfectly! The strange thing is that the error message ("Uncaught ReferenceError: iMask is not defined") still appears on the console though. But it's working fine now. Thank you buddy. – Dark Defender Feb 25 '14 at 02:59
2

That's because jQuery is downloaded but not ready yet. Try

$(function(){
// your code goes here
});
David Freire
  • 671
  • 9
  • 23
1

You need to wrap your jQuery in document.ready as several folks have already mentioned. You also need to adjust your mask to match your desired input. I assume you only want alpha characters allowed. This JSFiddle shows you an example with that assumption.

If you want alphanumeric just replace 'a' with '*'. Below is the jQuery Code:

$(function() {
   //The # of "a"s you enter depends on your max field input
   //The "?" makes any character after the first one optional
   $("#fname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa"); 
   $("#lname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa"); 
});

It should also be said that using the masked input plugin may not be the best option to validate a name as it is meant for fixed width inputs. If you want to validate alpha characters of varying lenghts consider doing something like this instead.

Community
  • 1
  • 1
RossG
  • 434
  • 3
  • 8
  • Thank you my friend. In fact, I also would like to use a JQuery/Javascript plugin for validation of input fields(names, dates, phone numbers, SSN, etc). Do you know a good one? – Dark Defender Feb 25 '14 at 03:08
  • The plugin you are using is actually pretty good at enforcing dates/phone numbers and SSNs because those are all fixed width. But check out one of these: https://github.com/posabsolute/jQuery-Validation-Engine OR http://jqueryvalidation.org/ – RossG Feb 25 '14 at 04:08