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!
Hi there,
Maybe I’m missing something obvious, but wouldn’t just setting <input type="password" /> suffice?
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?
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?
So on some fields you want to mask part of the input, but have the rest in plain text?
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
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?
Assuming it is, here’s a fun way of masking only certain characters in an input field:
<!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 a3@test.com, how do I keep the actual input and validate against it instead of what is currently showing in the field (a3@test.com).
I appreciate your guidance so far, thank you!
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!
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
Hey,
So you could do something like this:
<!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!
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.