Need help with Javascript

[Inny]

Hi folks, I need some help with A javascript thats basically a spam/swearword filter. Its designed to disable the submit button if a matching word from an array is found.

heres a working example

<script language="JavaScript1.2">

// Word Filter


var swear_words_arr=new Array("silly","crap","idiot","http");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
swear_alert_count=0;
}

function validate_text()
{
reset_alert_count();
var compare_text=document.formx.post.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).t
oLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i
].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="*" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("Your post cannot be submitted.*The following Naughty words were found:*_______________________________*" + alert_text + "*_______________________________");
document.formx.post.select();
}
else
{
document.formx.submit();
}
}

function select_area()
{
document.formx.post.select();
}

window.onload=reset_alert_count;

</script>



<form name="formx" method="post" action="post">

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

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

test here

http://leprofesseur.tripod.com/html-testbed.htm

Im trying to intergrate this into my ipb v1.3 forum for a specific forum only (guests). Having no luck despite my efforts. Heres what I tried (matching my system) but it still submits. Not sure how to 'href. match' for a specific forum url only.

<script language="JavaScript1.2">

// Cant even post bad words Filter

var swear_words_arr=new Array("WORD1","WORD2","WORD3");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
swear_alert_count=0;
}

function validate_text()
{
reset_alert_count();
var compare_text=document.REPLIER.post.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).t
oLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i
].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="*" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("Your post cannot be submitted.*The following Naughty words were found:*_______________________________*" + alert_text + "*_______________________________");
document.REPLIER.post.select();
}
else
{
document.REPLIER.submit();
}
}

function select_area()
{
document.REPLIER.post.select();
}

window.onload=reset_alert_count;

</script>







in submit input button put....
onclick="validate_text()"

in textarea put....
onclick="select_area()">

Any help appreciated thanks :)

[digital-ether]

Hi,

You should put some alerts in your code to see if it is actually being run or not, and to see if the variables are changing as expected...

You could probably just check word for word also by creating an array of words out of the form field value.

eg:

var arr = document.formx.post.value.split(/[\s\.,\-]+/);

Then matching the words in the array to each "spam word".

Here's an prototype of the Array() that returns the index of a matched value..

Array.prototype.in_array = function(value) {
	for (var x = 0; x < this.length; x++) {
		if (this[x] == value) {
		   return x;
		}
	}
	return -1;
};

eg:

...
if (swear_words_arr.in_array(word.toLowerCase()) != -1) {
	// spam word found		
}
...

That way you don't have to match character for character...

[Inny]

Thanks. For some reason I just tested it in a testbed (my 'working' example *cough* and it didnt work! ?? help clueless!

[digital-ether]

Thanks. For some reason I just tested it in a testbed (my 'working' example *cough* and it didnt work! ?? help clueless!

You mean when you put in the alerts they were never fired?

Regarding:

onclick="validate_text()"

Is this onclick on an input of type="button" or type="submit" ? If its of type="submit" then the form every time..

[MattEvans]

You shouldn't use JavaScript for restrictive/non-helpful form validation. It's amusingly easy to bypass.

[Inny]

Its a submit.

[MattEvans]

An onsubmit event handler would probably be more use, and it's a form event rather than a button/input event.

http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

[Inny]

Arrrrrgh! Thanks people I appreciate your input but Im just too daft to make the thing work im afraid. My knowledge is very very basic.

[digital-ether]

don't give up yet! You're so close.. :)

Since the onclick event listener is attached to a submit field rather than just a button, the form will be submitted no matter what. Your onclick event listerner will most likely not complete execution.

What you can do is change the field to a type="button" instead of type="submit".
Then the form will not be submitted unless you submit it via javascript with the form.submit() method.

However, a better way of doing it is to attach an event Listener to the form submit method, as Matt said.
This allows a user without javascript on their browser to submit the form, but users with javascript to have the form validation.

You could do it like:

document.formx.onsubmit = function() {

// paste the form validation code you have here.. 
// then use "return false;" to not send the form, and "return true;" to send it.

};

A better way to attach event listerners is to use the W3C DOM method: addEventListener()

http://developer.mozilla.org/en/docs/DOM:element.addEventListener

and use the M$ implementation, attachEvent(), where needed.

Heres one implementation:

addEvent = function(el, evType, fn, useCapture) {
	if (el.addEventListener) {
		el.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (el.attachEvent) {
		var r = el.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		el['on' + evType] = fn;
	}
}

that way you can attach multiple events, and also not overwrite any events that are attached by other parts of the script.

Off course when you use JS form validation, it should be considered as helping the form user, nothing more.
I wrote something on this last night: http://fijiwebdesign.com/content/view/93/77/ (its not finished)
JS form validation is very useful in helping the user out however since close to 100% of users have JS on their browser.

[Inny]

Thanks fopr the encouragement! :D
this does indeed work well (see below) but Im not sure how to integrate/make changes to my form (below that) to work.

[please assist if you havent run out of patientts

<script language="JavaScript1.2">
var swear_words_arr=new Array("silly","bloody","idiot","asshole");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
 swear_alert_count=0;
}

function validate_user_text()
{
 reset_alert_count();
 var compare_text=document.form1.user_text.value;
 for(var i=0; i<swear_words_arr.length; i++)
 {
  for(var j=0; j<(compare_text.length); j++)
  {
   if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
   {
    swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
    swear_alert_count++;
   }
  }
 }
 var alert_text="";
 for(var k=1; k<=swear_alert_count; k++)
 {
  alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
 }
 if(swear_alert_count>0)
 {
  alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.form1.user_text.select();
 }
 else
 {
  document.form1.submit();
 }
}

function select_area()
{
 document.form1.user_text.select();
}

window.onload=reset_alert_count;

</script>



<form name="form1" method="post" action="your_post_address.asp">

<table><tr><td></td></tr></table>
<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>
<table><tr><td></td></tr></table>
<center><input type="button" style="background:#EFEFEF; border:2 solid #808080; width:100px; cursor:pointer" value="Submit" onclick="validate_user_text();"></center>
</form></form>

my form that needs changing...(relavent Parts)

<textarea cols='70' rows='8' name='Post' class='textinput'  tabindex="1">
</textarea>
<BR>
<BR>
<a href="http://www.upload3r.com/"target="_blank">Alternate upload Click here (paste url)</a>
<BR>
<BR>
{ibf.lang.upload_title}Attach single image
{ibf.lang.upload_text} $data<input class='textinput' type='file' size='30' name='FILE_UPLOAD' /><BR><BR>

<input type='checkbox' name='enableemo' value='yes' class="checkbox" checked="checked" />&nbsp;{ibf.lang.qr_add_smilie} |
<input type='checkbox' name='enablesig' value='yes' class="checkbox" checked="checked" />&nbsp;{ibf.lang.qr_add_sig}

</TD></TR>
</Table>

<div align='center'> 
<input type='submit' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" />&nbsp;
<input type='submit' name='preview' value='{ibf.lang.qr_more_opts}' class='forminput' />
&nbsp;&nbsp; <input type='button' name='qrc' onclick="ShowHide('qr_open','qr_closed');" value='{ibf.lang.qr_closeit}' class='forminput' />
</div>
</div>
</form>

[Inny]

Bump* pretty please help? :D

[digital-ether]

Method 1: You can change the form submit field into a button field and attach the validation to the onclick event as mentioned before.

Take:

<input type='submit' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" />

And change it to:

<input type='button' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" onclick="vaildate_user_text();" />

In the function vaildate_user_text() you'll have to make sure the objects references to the HTML form elements are correctly referencing your form and fields.

ie:

var compare_text=document.form1.user_text.value;

Should point to the form field of you are vaildating..

document.form1.submit();

Should correctly point to the form to submit.

Method 2: Or you can attach a listerner to the form submit button, this way you don't have to change the submit field to a button field, so that it works with browsers not supporting JS.

In your code the form is not showing, but this is what it would look like:

<form name="you_form_name" onsubmit="return vaildate_user_text();">

Notice the "return vaildate_user_text();" and not just "vaildate_user_text()". The reason for this is that the form will be submitted if the return from the onsubmit event is === true (or NULL) and will not sumit if the return is === false.

Then in validate_user_text(), you'll have to make sure the object references to the form elements are correct, just like in Method 1.

The only other change is that you will not need the:

document.form1.submit();

In place of it put:

return true;

This return is returned to the form submit event, and will continue submitting the form.

After:

alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.form1.user_text.select();

Add:

return false;

This will return false to the form.submit() event and thus cancel the form submission.

Hope that gets you moving forward... :)

[Inny]

OK I tried both methods! With this first method, the submit did nothing at all.

<script language="JavaScript1.2">
var swear_words_arr=new Array("silly","bloody","idiot","slut");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
 swear_alert_count=0;
}

function validate_user_text()
{
 reset_alert_count();
 var compare_text=document.REPLIER.submit();
 for(var i=0; i<swear_words_arr.length; i++)
 {
  for(var j=0; j<(compare_text.length); j++)
  {
   if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
   {
    swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
    swear_alert_count++;
   }
  }
 }
 var alert_text="";
 for(var k=1; k<=swear_alert_count; k++)
 {
  alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
 }
 if(swear_alert_count>0)
 {
  alert("The Post cannot be submitted.\nThe following Ugly words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.REPLIER.user_text.select();
 }
 else
 {
  document.REPLIER.submit();
 }
}

function select_area()
{
 document.REPLIER.user_text.select();
}

window.onload=reset_alert_count;

</script>

USING...

<input type='button' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" onclick="vaildate_user_text();" /> &nbsp;

With the second method I tried, the form still submitted anyway

<script language="JavaScript1.2">
var swear_words_arr=new Array("silly","bloody","idiot","*******");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
 swear_alert_count=0;
}

function validate_user_text()
{
 reset_alert_count();
 var compare_text=document.REPLIER.user_text.value;
 for(var i=0; i<swear_words_arr.length; i++)
 {
  for(var j=0; j<(compare_text.length); j++)
  {
   if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
   {
    swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
    swear_alert_count++;
   }
  }
 }
 var alert_text="";
 for(var k=1; k<=swear_alert_count; k++)
 {
  alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
 }
 if(swear_alert_count>0)
 {
  alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.REPLIER.user_text.select();
 }
 else
 {
  document.REPLIER.submit();
 }
}

function select_area()
{
 document.REPLIER.user_text.select();
}

window.onload=reset_alert_count;

</script>

WITH FORM ALTERED TO...

<form name='REPLIER' action="{ibf.script_url}" method='post' onsubmit='return vaildate_user_text()' enctype='multipart/form-data'>


THIS IS THE ORIGINAL

<form name='REPLIER' action="{ibf.script_url}" method='post' onSubmit='return ValidateForm()' enctype='multipart/form-data'>

[digital-ether]

OK I tried both methods! With this first method, the submit did nothing at all.

<script language="JavaScript1.2">
var swear_words_arr=new Array("silly","bloody","idiot","slut");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
 swear_alert_count=0;
}

function validate_user_text()
{
 reset_alert_count();
 var compare_text=document.REPLIER.submit();
 for(var i=0; i<swear_words_arr.length; i++)
 {
  for(var j=0; j<(compare_text.length); j++)
  {
   if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
   {
    swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
    swear_alert_count++;
   }
  }
 }
 var alert_text="";
 for(var k=1; k<=swear_alert_count; k++)
 {
  alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
 }
 if(swear_alert_count>0)
 {
  alert("The Post cannot be submitted.\nThe following Ugly words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.REPLIER.user_text.select();
 }
 else
 {
  document.REPLIER.submit();
 }
}

function select_area()
{
 document.REPLIER.user_text.select();
}

window.onload=reset_alert_count;

</script>

USING...

<input type='button' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" onclick="vaildate_user_text();" /> &nbsp;

With the second method I tried, the form still submitted anyway

<script language="JavaScript1.2">
var swear_words_arr=new Array("silly","bloody","idiot","*******");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
 swear_alert_count=0;
}

function validate_user_text()
{
 reset_alert_count();
 var compare_text=document.REPLIER.user_text.value;
 for(var i=0; i<swear_words_arr.length; i++)
 {
  for(var j=0; j<(compare_text.length); j++)
  {
   if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
   {
    swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
    swear_alert_count++;
   }
  }
 }
 var alert_text="";
 for(var k=1; k<=swear_alert_count; k++)
 {
  alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
 }
 if(swear_alert_count>0)
 {
  alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.REPLIER.user_text.select();
 }
 else
 {
  document.REPLIER.submit();
 }
}

function select_area()
{
 document.REPLIER.user_text.select();
}

window.onload=reset_alert_count;

</script>

WITH FORM ALTERED TO...

<form name='REPLIER' action="{ibf.script_url}" method='post' onsubmit='return vaildate_user_text()' enctype='multipart/form-data'>


THIS IS THE ORIGINAL

<form name='REPLIER' action="{ibf.script_url}" method='post' onSubmit='return ValidateForm()' enctype='multipart/form-data'>

There are 3 things I can see that can cause problems.

1) First Prob:

In the first method, the submit does nothing. This is because you have the input button named "submit".

<input type='button' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" onclick="vaildate_user_text();" />

This overwrites the submit method of the form replacing it with the form input element. What you can do is name the form input "_submit" or something like that, it usually would not matter, unless the server side code checks for its existence (which you can also change server side).

2) Second Prob:

In method 2 you have:

if(swear_alert_count>0)
 {
  alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.REPLIER.user_text.select();
 }
 else
 {
  document.REPLIER.submit();
 }

This should be:

if(swear_alert_count>0)
 {
  alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.REPLIER.user_text.select();
  return false;
 }
 else
 {
  return true;
 }

With method 2, you have to return either boolean TRUE or FALSE. The onsubmit() form event will carry on if you return TRUE, and thus submit for the form, or stop if you return FALSE.

I'd suggest you go with method 2. Therefore you will not need to rename the submit button, and you can control the form submission just by returning true or false.

3) Third Prob:

In method 2, the original form open tag looked like:

<form name='REPLIER' action="{ibf.script_url}" method='post' onSubmit='return ValidateForm()' enctype='multipart/form-data'>

As you can see, there is already a form validation there. So if you replace it with your validation, you are bypassing the validation that was there before.

What you should do is create a new function for validation, as such:

function myValidateForm() {

   if (!ValidateForm()) {
      return false;
   }

   return validate_user_text();

}

This new function will first check if the ValidateForm() returns FALSE. If it does, it will return false.
If ValidateForm() returns TRUE, it will return validate_user_text()'s return.

This way both functions have to return true for the form to be submitted.

You'll have to change the form opening tag to:

<form name='REPLIER' action="{ibf.script_url}" method='post' onSubmit='return myValidateForm()' enctype='multipart/form-data'>

--

A note on debugging your JS.
Since the form submit will reload the page, and you wont be able to see any errors, I suggest you put alerts in different parts of the code to see whats happening...

You can also download firebug. http://www.getfirebug.com/
Its has an awesome JS debugging platform (best In my book). You can go through the JS line by line, so see whats happening...

:cheesy:

[digital-ether]

forgot to mention.

Firebug is a firefox extension. You'll need to have firefox (I believe 2.0) in order to use it.
For JS debugging, firefox give's better error codes anyways, IE error codes are very limited. Plus, firefox is used by almost 50% or so users nowdays, so you'll need to debug in firefox anyways..

[Inny]

Wow Your Patient! :D OK tried this, but form still submitted, do I need to change the submit button part?

<script language="JavaScript1.2"> var swear_words_arr=new Array("silly","bloody","idiot","bugger"); var swear_alert_arr=new Array; var swear_alert_count=0; function reset_alert_count() { swear_alert_count=0; } function validate_user_text() { reset_alert_count(); var compare_text=document.REPLIER.user_text.value; for(var i=0; i<swear_words_arr.length; i++) { for(var j=0; j<(compare_text.length); j++) { if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase()) { swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length)); swear_alert_count++; } } } var alert_text=""; for(var k=1; k<=swear_alert_count; k++) { alert_text+="\n" + "(" + k + ") " + swear_alert_arr[k-1]; } function myValidateForm() {

   if (!ValidateForm()) {
      return false;
   }

   return validate_user_text();

}
  if(swear_alert_count>0) { alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________"); document.REPLIER.user_text.select(); return false; } else { return true; } } function select_area() { document.REPLIER.user_text.select(); } window.onload=reset_alert_count; </script>


USING

<form name='REPLIER' action="{ibf.script_url}" method='post' onSubmit='return myValidateForm()' enctype='multipart/form-data'>