asked on

JavaScript Form Filter

I have a form that has a validator to make sure certain fields are filled in. Now I need a filter to make sure a list of certain words cannot be used, such as swear words.

I need it to check the whole form, which as many fields. How can I do this?

TName

This will alert for every "bad" wor it has found. In this example, bad words are bad1, bad2, xxx, yyy, zzz.
Fill the array "bad" with bad words. The example is not case sensitive:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function checkIt() {

var bad = new Array('bad1','bad2','xxx','yyy','zzz');

var count=0;
var fields=document.getElementsByTagName('INPUT');
for (var i=0;i<fields.length;i++) {
if ((fields[i].type=='text')&&(fields[i].value!=''))
for (var j=0; j<bad.length;j++) {
if (fields[i].value.toLowerCase()==bad[j].toLowerCase()) {
alert(bad[j]+' not allowed');
count++;
}
}
}
if (count>0)
return false;
else
return true;
}
</script>
</head>
<body>
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
<input type="button" onClick="checkIt();">
</body>
</html>

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TName

If you want to check only the fields on the form, not in the entire document, you can change
var fields=document.getElementsByTagName('INPUT');
to
var fields=document.form1.getElementsByTagName('INPUT');
where "form1" would be your form's name.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function checkIt() {

var bad = new Array('bad1','bad2','xxx','yyy','zzz');

var fields=document.form1.getElementsByTagName('INPUT');
for (var i=0;i<fields.length;i++) {
if ((fields[i].type=='text')&&(fields[i].value!=''))
for (var j=0; j<bad.length;j++) {
if (fields[i].value.toLowerCase()==bad[j].toLowerCase()) {
alert('\"'+bad[j]+'\"'+' not allowed!');
return false;
}
}
}
return true;
}
</script>
</head>
<body>
<form name="form1">
<input type="text">
<input type="text">
<input type="text">
</form>
<input type="button" onClick="checkIt();">
</body>
</html>