filtering in and out text from input textbox

[Vermelh0]

I'm trying to create a textbox where I want to filter text as it's being inputted into it.
For instance, if my filter is "1234567890" then I don't want to allow the user to input any of those characters. But, (to complicate matters worse) I also need the opposite.... I also may want to say instead of excluding only these chars, I would want to allow a user to include them only and nothing else.
Can anybody help, or point me in the right direction??? I was thinking regex could help, but I know nothing about it....
Thanks,
V

[ShriekForth]

Have a look at this thread (http://www.codingforums.com/showthread.php?s=&threadid=3668). The solution provided by adios will probably do what you need.

ShriekForth

[beetle]

<input type="text" name="numbers" onKeyPress="this.value.replace(/\D/,'');" />

<input type="text" name="text" onKeyPress="this.value.replace(/\d/,'');" />

[Vermelh0]

<input type="text" name="numbers" onKeyPress="this.value.replace(/\D/,'');" />

<input type="text" name="text" onKeyPress="this.value.replace(/\d/,'');" />

I created a page for this and found out it did nothing.... What's it's supposed to do???? Hum, better yet, anybody know of a good site to learn regex????
V

[beetle]

Sorry, I typoed that a little bit, should be

<input type="text" name="numbers" onKeyPress="this.value=this.value.replace(/\D/,'');" />

This isn't perfect though, because it allows the character fromt he key pressed to enter the input, THEN it removes it on the nest key press. Somthing like adios's scipt is a bit better...

Note: although I like the approach adios took in the thread that ShriekForth linked to, it has a major flaw: since the filtering is triggered only by key events, one can successfully copy+paste unwanted text, and programs like Gator and Windows Password Manager will do the same. I believe it to be much better to validate form data at the time of submission. So much that I dedicate a small part of my life to it with fValidate (see the link in my signature)

A great site to learn regex syntax is here (http://www.webreference.com/js/column5/index.html)

[dhtmlhelp]

I was reading this thread and a question came to mind:

In sites like yahoo mail a user cannot use previously entered information. How is that done, what is the script to disable form history data.

thanks,

DHTMLHELP

[Vermelh0]

I also noticed that if you type a string of 2's and then navigate to the middle and type, say a 3 the number will magically appear at the end of the string of 2's.... That is not good.....
I'll have to take a closer look at adios' script...
I saw your site, and I have to say that it's great work, but I need validation on the fly. I have several controls that cause postback, and if the input isn't valid when a postback occurs then I'll have problems dealing with the garbage data on the server.
Thank you for the link to the regex expressions, though.... Now... for some reading up on the regex expressions... :)
V

[beetle]

Originally posted by Vermelh0
I also noticed that if you type a string of 2's and then navigate to the middle and type, say a 3 the number will magically appear at the end of the string of 2's.... That is not good.....
I'll have to take a closer look at adios' script...
I saw your site, and I have to say that it's great work, but I need validation on the fly. I have several controls that cause postback, and if the input isn't valid when a postback occurs then I'll have problems dealing with the garbage data on the server.
Thank you for the link to the regex expressions, though.... Now... for some reading up on the regex expressions... :)
V I hope the article helps you, I still use it as a reference every once in a while

I'm confused by what you mean when you say postback? Javascript validation routines like fValidate run in their entirety BEFORE any data is sent to the server, so I'm not sure why you need 'on the fly' validation.

[adios]

the approach adios took...has a major flaw: since the filtering is triggered only by key events, one can successfully copy+paste unwanted text....I believe it to be much better to validate form data at the time of submission.

No reason you can't do both, one to avoid the problem (in a majority of cases), the other as a backstop. Neither approach is 'flawed' - they're just designed to do different things.

Have a look at this:

<html>
<head>

<script type="text/javascript">

var RegEx_filter = Object;
RegEx_filter['digits'] = /[0-9]/;
RegEx_filter['nodigits'] = /[^0-9]/;

var currFilter = RegEx_filter['digits'];

function filterIt(e, filter) {
var chr;
if (e && e.keyCode) chr = String.fromCharCode(e.keyCode);
if (e&& e.which) chr = String.fromCharCode(e.which);
if (chr) return filter.test(chr);
else return true;
}

function changeFilter(button) {
button.value = button.value == 'Digits Only' ?
'No Digits' : 'Digits Only';
return currFilter == RegEx_filter['digits'] ?
RegEx_filter['nodigits'] : RegEx_filter['digits'];
}

</script>
</head>
<body>
<form>
<input onkeypress="return filterIt(event,currFilter)">
<input type="button" value="Digits Only" onclick="currFilter=changeFilter(this)">
</form>
</body>
</html>

[beetle]

Adios

while your code works wonderfully, I'm afraid this is just one area in which we do not agree. Having two forms of validation is good, typically 1 client-side and 1 server-side. However, I believe it's completely unecessary to have two forms of client-side validation/filtering. Since I'm obviously of the belief that validating form data onSubmit is the better method, I don't see the purpose of replacing/complementing it with a filter (besides, they STILL don't stop little proggies like Gator and whatnot). To establish my rantings, I'll give a quick list why I think it's better
Useful error messages to the user
User is asked to correct erroneous data after they've completed the form, and not at each step
Nobody will think their keyboard is broken because numbers won't go into a field
Does not have the limits that filtering does and can validate more complex dataAnd, for the record. I'm not arguing with you just to argue or make my point, but so that perhaps others can comment on what I/you have said an learn from this interaction. I am indeed curious as to why you prefer filtering.

Oh, and perhaps 'flaw' isn't the best word, but what I was trying to get at is this: If a script is put in place to have an effect on the data being captured by the form, why use one that won't work in 100% of instances (well, assuming javascript is turned on ;)) That's like putting on body armor that will stop a .45, but not a .22. Was it really worth it to invest in the less-effective vest?

[Vermelh0]

beetle,
I understand your point, but there's certain things my company wants me to implement that just can't wait until a form submits. For instance, if a text field is supposed to contain doubles. They want the field to autoformat itself to a certain number of decimal places as soon as the user leaves it. I obviously can't do this, if I can't guarantee that when the control loses focus that it doesn't contain other characters besides numbers and a decimal point.
Anyway, I think I'm making progress on the regex implementation....
Just one last question.... Anyone have an easy way to get the cursor position inside a field text? I already created a function, but it's way too complicated I need something simpler. I really don't like the way it works....
Thanks,
V

[beetle]

Originally posted by Vermelh0
They want the field to autoformat itself to a certain number of decimal places as soon as the user leaves it. I obviously can't do this, if I can't guarantee that when the control loses focus that it doesn't contain other characters besides numbers and a decimal point.Why not? A while back I wrote a parseDecimal() function to accompany the existing parseInt() and parseFloat() (not exactly the same since those are methods) that should work nicely for this.function parseDecimal(decimal,zeros) {
var mult = "1";
for (var i=0; i<zeros; i++)
mult += "0";
mult = parseInt(mult);
decimal=decimal.replace(/[a-zA-Z\!\@\#\$\%\^\&\*\(\)\_\+\-\=\{\}\|\[\]\\\:\"\;\'\<\>\?\,\/\~\`]/g,"");
while (decimal.indexOf(".") != decimal.lastIndexOf("."))
decimal=decimal.replace(/\./,"");
return parseFloat(Math.round(decimal*mult)/mult);
}

<input type="text" name="decimal" id="decimal" onBlur="this.value=parseDecimal(this.value, 2)"/> Note: I don't consider this to be filtering, because I don't limit data on each keystroke, but rather format it once they are done