Format - Not Validate - possible with JavaScript? 2

[vistor]

Hi,

I know how to validate if a user has left an input field on an html form blank. What I need is for the user to input the phone field in a consistant manner, xxx-xxx-xxxx.

Can the input field be formated, similar to an input mask in a database field?

 

[xutopia]

yes it can be done. For that to be possible you have to learn about onkeypress as well as onchange wich are events that are triggered by the input field. You can attach functions to these events that will execute automatically. What you put inside these functions will dictate how the field works. Gary

http://www.xutopia.com

Haran

 

[jemminger]

hi vistor,

here's a relatively reusable example:

[tt]
function formatNum(oEl) {
var data = oEl.value;

// fail if non-numeric
if (/\D/g.test(data)) return false;

var res = "";

for (x = 1; x < arguments.length; x++) {
if (x % 2 == 0) {
res += arguments[x];
}
else {
for (y = 0; y < arguments[x]; y++) {
res += data.charAt(0);
data = data.substring(1);
}
}
}
res += data;
return res;
}
[/tt]


it is used like so:[tt]
<input type=&quot;text&quot; name=&quot;num&quot; onblur=&quot;this.value = formatNum(this,3,'-',3,'-');&quot; />
[/tt]

the usage is: [tt]formatNum(this, # of nums before separator, separator, [# of nums before separator, separator]);[/tt]

you could also use it to validate dates:

&quot;mm/dd/yyyy&quot;[tt]
formatNum(this,2,'/',2,'/');[/tt]
=========================================================
if (!succeed) try();
-jeff

 

[vistor]

Thanks!

 

[keijen]

If you google for anyMask you'll find a good script that allows you to mask inputs of almost any kind.

 

[yesti]

Great example! Would you mind explaining how it works? Thanks.

 

[jemminger]

hi yesti,

mine isn't that complex - the anyMask script is more robust...anyway, here's mine explained if you want:

this line uses a regular expression to check for numeric values only, and returns false if a non-numeric value is found:
[tt]
if (/\D/g.test(data)) return false;
[/tt]
next we loop through the arguments array passed to formatNum()...if we're on an odd numbered argument array element, we add the amount of characters to the result string from the data string as specified by that array element, removing that character from the data string as we go along.

if we're on an even array index, we add that element's value to the results string.

finally, after all the arguments we add whatever is left of the data string to the result string.

so:
formatNum(this,3,'-',2,'+');

does this:
-take the first 3 characters of the data string and add to the result string
-add a '-' to the result string
-take two more characters from data string and add to result string
-add a '+' to the result string
-add the remainder of the data string to the result string



=========================================================
if (!succeed) try();
-jeff

 

[vistor]

I don't understand what this means at the end of your posts

=========================================================
if (!succeed) try();
-jeff

 

[jemminger]

hi vistor,

just my coder-geek version of &quot;if at first you don't succeed, try and try again.&quot;
=========================================================
if (!succeed) try();
-jeff

 

[yesti]

Thanks for the explanation! I'll see if I can make sense of it. So much to learn!