Today is . Page created 07/26/06

Word     Word Filter     Filter



Try entering the words "bloody", "war", or "terror" in the text box above.
The "Reset" button is "Not" part of the effect. We added it just as a convenience.

T his form validator filters pre-selected words in a text box. When the user submits text, the validator will check the words against the list of banned words.

We have tested the code in IE6.0, Firefox1.5.0.4, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

For Your Information For your Information:     Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

D epending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> section and incorporated into the <BODY> section of a working form in your document with minimal reconfigurations in both parts.

<!---- Reconfigurations <HEAD> Section ---->

<!-- Begin
// Enter the words to be filtered in the line below:
var swear_words_arr=new Array("bloody","war","terror");

var swear_alert_arr=new Array;

J ust add whatever words you do not want to be allowed to be submitted in the above section. It does not matter how many words you add. You can have three (3) or three hundred (300). Just Be Sure to enclose each one with quotations (" "), and add a comma (,) after each quote("Word Goes Here", ) except for the last word. This one does not get a comma*.

*     If you add a comma to the last word, it will not filter it and allow it to go unchecked.Unhappy Smiley

<!---- Reconfigurations <BODY> Section ---->

<div align="center">
<form name="form1">
<textarea rows="3" cols="40" name="user_text" style="border:2 solid #808080; font-family:verdana,arial,helvetica; font-weight:normal; font-size:10pt" onclick="select_area()">Enter your text here...</textarea><br><br>

<input type="button" style="background:#EFEFEF; border:2 solid #808080; width:25%; cursor:pointer" value="Submit" onclick="validate_user_text();">
</form>

<!---- Define Above Areas ---->

  • rows="3" - How high the form itself is from top to bottom
  • cols="40" - Is how wide the form is from side to side
  • border:2 - Is how wide the border is around the form. This reconfiguration is also the same for the Submit button also.
  • solid #808080; - Defines a color defined solid border around the form(also the Submit button). If you change from solid to dotted, you get a completely different effect.
  • Solid:       Dotted:
  • font-family:verdana,arial,helvetica; - The different font styles for the text on the button.
  • font-weight:normal; - This is again for the text on the button. It can be changed to bold
  • Bold:  
  • font-size:10pt" - Basically self-explanatory. The larger the number the bigger the size.
  • Enter your text here... - This is where you would type your information into the <textarea> </textarea> form.

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]