SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Mask input fields without affecting validation

    Hi Guys, I need to mask a few input fields with asterisks e.g fields like billing zip code, credit card etc. On this particualr webstie we are using Query 1.4.2 and jQuery validation plug-in 1.5.5 Is there a way for me to modify the input values to show asterisks e.g . for billing zip code ***** without affecting the validation? Is there a know mask plugin that will work with the above jQuery and validation plugin with any conflicts?

    Please advise.

    Thank you!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Maybe I'm missing something obvious, but wouldn't just setting <input type="password" /> suffice?

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the delayed response, changing type to password would have worked but some fields require masking like aaa***b, so I type=password will not work

    I use jQuery validation plugin on all my website but never had the need to mask fields but I'm sure for some people it's a common practice. Anyone has any experience with this?

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,154
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    If your talking about form inputs that the user is typing in you could use javascript to save the original value somewhere (eg. a "hidden", AJAXed to a db) and change the rendered to show differently. But what if javascript is turned off, is it very important that it be masked?

    If you're talking about values coming from the server, then it should be fairly easy to use the server's language to change the rendered values.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    If your talking about form inputs that the user is typing in you could use javascript to save the original value somewhere (eg. a "hidden", AJAXed to a db) and change the rendered to show differently. But what if javascript is turned off, is it very important that it be masked?

    If you're talking about values coming from the server, then it should be fairly easy to use the server's language to change the rendered values.
    I am only referring to form input fields, masking the values returned from the database is not a problem. So for input fields there is no other solution besides the hidden field ? No way to do it all in Javascript so validation plugin still works?

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by fazthegreat View Post
    some fields require masking like aaa***b
    So on some fields you want to mask part of the input, but have the rest in plain text?

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    doesn't matter how it's done, the user should see aaa***b when they focus out of the field with affecting the validation that is in place

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    You didn't answer my question

    You have a form field and you want to mask certain characters of the input (e.g. chars 4-6 as in the above example), the rest you want in plain text.
    Is that correct?

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Pullo View Post
    Is that correct?
    Assuming it is, here's a fun way of masking only certain characters in an input field:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Mask passwords</title>
      </head>
      
      <body>
        <form>
          <input type="text" id="myInput"/>
          <input type="submit">
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>   
        <script>
          $.fn.mask = function( options ) {
            var settings = $.extend({
              from: 0,
              to: 0
            }, options ); 
    
            this.on("keypress", function(e){
              var realValue = $(this).data("value") || "",
                  displayValue = this.value,
                  length = displayValue.length + 1,
                  keypressed = String.fromCharCode(e.keyCode);
    
              $(this).data("value", realValue + keypressed);
    
              if(length >= settings.from && length <= settings.to){
                this.value = displayValue + "-"
                e.preventDefault();
              }
            })
          }
    
          $("#myInput").mask({
            from: 4, to: 6
          })
        </script>
      </body>
    </html>
    It's still very rudimentary, but could easily have some validation built in.
    Let me know if this is going in the right direction.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Assuming it is, here's a fun way of masking only certain characters in an input field:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Mask passwords</title>
      </head>
      
      <body>
        <form>
          <input type="text" id="myInput"/>
          <input type="submit">
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>   
        <script>
          $.fn.mask = function( options ) {
            var settings = $.extend({
              from: 0,
              to: 0
            }, options ); 
    
            this.on("keypress", function(e){
              var realValue = $(this).data("value") || "",
                  displayValue = this.value,
                  length = displayValue.length + 1,
                  keypressed = String.fromCharCode(e.keyCode);
    
              $(this).data("value", realValue + keypressed);
    
              if(length >= settings.from && length <= settings.to){
                this.value = displayValue + "-"
                e.preventDefault();
              }
            })
          }
    
          $("#myInput").mask({
            from: 4, to: 6
          })
        </script>
      </body>
    </html>
    It's still very rudimentary, but could easily have some validation built in.
    Let me know if this is going in the right direction.
    Thank you so much for the code above. Can this code be incorporated with jQuery Validation plugin? Currently all forms of the website use jQuery validation and I would like to incorporate masking without having to change or do minimal changes to the existing validation in place. One of the requirement for the email address field are as follows:

    a@test.com - no masking reqruied
    a*@test.com - 2 characters before @ mask 2nd character
    a**@test.com - 3 characters before @ mask last two
    a**3@test.com - 4 or more characters before @ mask all characters in between 1 and last

    Now if I was to incorporate the above with jQuery Validation, ofcourse I will have to add some custom validation functions. Only confusing part is how am going to handle the validation if on focus out I change the value to something like a**3@test.com, how do I keep the actual input and validate against it instead of what is currently showing in the field (a**3@test.com).

    I appreciate your guidance so far, thank you!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I'm not sure how easy this will be to implement, but we can have a go

    First off, do you just need the masking that you describe above, or do you need other fields to be masked in different ways?

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    I'm not sure how easy this will be to implement, but we can have a go

    First off, do you just need the masking that you describe above, or do you need other fields to be masked in different ways?
    I have an idea, this is not going to be easy :-) Yes I have different requirements for different fields.

    Phone Number: On focusout last four digits should be masked e.g 212357****
    ZipCode: On focusout all digits should be masked as *****

    Thank you!

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by fazthegreat View Post
    Phone Number: On focusout last four digits should be masked e.g 212357****
    ZipCode: On focusout all digits should be masked as *****
    So the input doesn't need to be masked whilst the user is entering it, it just need to be masked when the user removes focus from the field?

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,



    So the input doesn't need to be masked whilst the user is entering it, it just need to be masked when the user removes focus from the field?
    Correct. Value should be masked on focusout and when the user clicks back inside the field it should show the exact value that was entered originally.

    Thanks

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    So you could do something like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Mask fields</title>
        <style>
        fieldset{ margin: 15px; }
        </style>
      </head>
      
      <body>
        <form>
          <fieldset>
            <legend>Phone Number</legend>
            <p>Last four digits should be masked e.g 212357****</p>
            <label for="phoneNumber">Phone Number</label>
            <input type="text" id="phoneNumber"/>
          </fieldset>
    
          <fieldset>
            <legend>Zip code</legend>
            <p>All digits should be masked as *****</p>
            <label for="zipCode">Zip code</label>
            <input type="text" id="zipCode"/>
          </fieldset>
    
          <fieldset>
            <legend>Email</legend>
            <p>
              a@test.com - no masking reqruied<br />
              a*@test.com - 2 characters before @ mask 2nd character<br />
              a**@test.com - 3 characters before @ mask last two<br />
              a**3@test.com - 4 or more characters before @ mask all characters in between 1 and lastall digits should be masked as *****<br />
            </p>
            <label for="email">Email</label>
            <input type="text" id="email"/>
          </fieldset>
    
          <input type="submit">
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          $.fn.mask = function( regexp, matchGroup, callback ) {
            this.on("blur", function(e){
              $(this).data("value", this.value);
              var result;
    
              while (result = regexp.exec(this.value)) {
                var matches = result.slice(1);
    
                if (callback){
                  var substitute = callback(matches[0]);
                } else {
                  var substitute = Array(matches[matchGroup-1].length + 1).join("*");
                }
    
                matches[matchGroup-1] = substitute;
                this.value = matches.join("");
              }
            })
    
            this.on("focus", function(e){
              this.value = $(this).data("value") || "";
            });
          }
    
          // With Regular expression
          phoneRegexp = new RegExp("(.*?)(.{4})$", "g");
          $("#phoneNumber").mask(phoneRegexp, 2);
    
          zipRegexp = new RegExp("^(.+)$", "g")
          $("#zipCode").mask(zipRegexp, 1);
    
          // With callback
          emailRegexp = new RegExp("^(.*)(@.*)$", "g")
          $("#email").mask(emailRegexp, 1, function(){
            switch(match.length){
              case 1: 
                return match;
              case 2:
                return match[0] + "*";
              case 3:
                return match[0] + "**";
              default:
                return match[0] + Array(match.length-1).join("*") + match[match.length-1];
            });
        </script>
      </body>
    </html>
    For fields whose masking pattern can easily be targeted with a regular expression, just use a regular expression with capture groups and specify which capture group to mask (as I have done with phone and zip).
    For fields whose masking pattern is more difficult (e.g. email where you only want to mask the character before the @ if it is proceeded by more than two characters), you can specify a callback.
    Note: this would not be necessary if JS supported negative lookbacks.
    This should also play nicely with validation.

    HTH
    Last edited by Pullo; Dec 23, 2013 at 13:33. Reason: Typo

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hey,

    So you could do somethinglike this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Mask fields</title>
        <style>
        fieldset{ margin: 15px; }
        </style>
      </head>
      
      <body>
        <form>
          <fieldset>
            <legend>Phone Number</legend>
            <p>Last four digits should be masked e.g 212357****</p>
            <label for="phoneNumber">Phone Number</label>
            <input type="text" id="phoneNumber"/>
          </fieldset>
    
          <fieldset>
            <legend>Zip code</legend>
            <p>All digits should be masked as *****</p>
            <label for="zipCode">Zip code</label>
            <input type="text" id="zipCode"/>
          </fieldset>
    
          <fieldset>
            <legend>Email</legend>
            <p>
              a@test.com - no masking reqruied<br />
              a*@test.com - 2 characters before @ mask 2nd character<br />
              a**@test.com - 3 characters before @ mask last two<br />
              a**3@test.com - 4 or more characters before @ mask all characters in between 1 and lastall digits should be masked as *****<br />
            </p>
            <label for="email">Email</label>
            <input type="text" id="email"/>
          </fieldset>
    
          <input type="submit">
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          $.fn.mask = function( regexp, matchGroup, callback ) {
            this.on("blur", function(e){
              $(this).data("value", this.value);
              var result;
    
              while (result = regexp.exec(this.value)) {
                var matches = result.slice(1);
    
                if (callback){
                  var substitute = callback(matches[0]);
                } else {
                  var substitute = Array(matches[matchGroup-1].length + 1).join("*");
                }
    
                matches[matchGroup-1] = substitute;
                this.value = matches.join("");
              }
            })
    
            this.on("focus", function(e){
              this.value = $(this).data("value") || "";
            });
          }
    
          // With Regular expression
          phoneRegexp = new RegExp("(.*?)(.{4})$", "g");
          $("#phoneNumber").mask(phoneRegexp, 2);
    
          zipRegexp = new RegExp("^(.+)$", "g")
          $("#zipCode").mask(zipRegexp, 1);
    
          // With callback
          emailRegexp = new RegExp("^(.*)(@.*)$", "g")
          $("#email").mask(emailRegexp, 1, function(){
            switch(match.length){
              case 1: 
                return match;
              case 2:
                return match[0] + "*";
              case 3:
                return match[0] + "**";
              default:
                return match[0] + Array(match.length-1).join("*") + match[match.length-1];
            });
        </script>
      </body>
    </html>
    For fields whose masking pattern can easily be targeted with a regular expression, just use a regular expression with capture groups and specify which capture group to mask (as I have done with phone and zip).
    For fields whose masking pattern is more difficult (e.g. email where you only want to mask the character before the @ if it is proceeded by more than two characters), you can specify a callback.
    Note: this would not be necessary if JS supported negative lookbacks.
    This should also play nicely with validation.

    HTH
    Awesome! Thank you so much, this is big help!

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by fazthegreat View Post
    Awesome! Thank you so much, this is big help!
    No problem. I'm glad it worked

    Perhaps to show your appreciation, you could take a moment to vote for anyone you feel has helped you in the past year in the SitePoint end of year awards.
    The link is in my signature.

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    No problem. I'm glad it worked

    Perhaps to show your appreciation, you could take a moment to vote for anyone you feel has helped you in the past year in the SitePoint end of year awards.
    The link is in my signature.
    I sure will! Thanks.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •