Detecting uppercase text in forms

Not caps lock key, but upper case text

[Lexur]

I rule some forums and classified ads services and I'm tired to try the user write properly.

I'm too in the upper case war.

I'm looking a snippet of code that allows me to detect a percentage of upper case text and do not allow to publish anything beyond this fixed percentage.

The idea I have is to build some code that, once the handler onblur or onsubmit happens, take a look in the input (or textarea) field and, doing some maths, detects too much upper case text, stops the submission and shows a messsage.
What I saw doing some research is a lot of code related to caps lock in form an password input fields. This kind of code does not prevent to those copypasters who goes from a classified ads service to another one from sunrise to sunset.

My worst problem is that I can understand how javascript works but I'm absolutely unable to write a single line of valid code.

Can anyone help me?

[eelixduppy]

>> I'm looking a snippet of code that allows me to detect a percentage of upper case text and do not allow to publish anything beyond this fixed percentage.

I feel like this is what you are looking for, is it not? Does the issue lie with the fact that you can only have a fixed percentage? Since the text size could be more or less depending on what is typed, you are probably going to want to use some sort of percentage-based system to calculate whether or not there are too many capital letters in the string.

Also note that adding a javascript validation does not mean that it will "detect" all cases because javascript can be turned off in the browsers not, or there just may be a browser that doesn't support javascript altogether. You should really be doing this validation server-side if you want to be sure that it will not contain a certain amount of uppercase letters.

[Lexur]

Regarding the javascript/server side issue, yes: it's better to do it in the server side but
a) I will not have license to modify the perl/php scripts in most cases
b) I think the percentage of real user (excluded bots and so on) with javascript disabled is less than 2% and most of them never will publish in my very very amateur and no-techie boards or publish an ad in my classified section.

Probably this is the long way to do it but maybe it will work:

- Once the onblur happens, the script counts the letters
- Then check every letter and detects if it's upper or lower case
- Having the total numbers, applies the percentage to detect if the text has too much upper case (let's accept that a normal text has a 10% of upper case or less)
- if the percentage of upper case is exceeded, the script stops submission and shows a message

[eelixduppy]

Here's a quick function that I have put together to calculate the percentage of the caps in a textarea. Enjoy :)

[pre]
function countCaps() {
    var text = document.getElementById("text_holder").value;
    var count = 0;
    for(i=0; i < text.length; i++) {
      if(text[i].charCodeAt(text[i]) >= 65 && text[i].charCodeAt(text[i]) <= 90)
         count++;
    }
alert("Number: " + count);
alert("Percentage: " + count/text.length*100 + " %");
}
[/pre]

[Lexur]

Thanks a lot!

I will try to insert this in the form and back here to comment results.

[vol7ron]

Eelix, how did you format your code above?

You could also use regular expressions for the same affect

function countCaps() {
   var matchList = "";
   var regexp = /[A-Z]/g;
   var text = document.getElementById("text_holder").value;
   while ((match = regexp.exec(text)) != null) {
      matchList += val;
   }

   
   alert("Number: " + matchList.length);

   alert("Percentage: " + matchList.length/text.length * 100 + "%");

}

I got it formatted but it was somewhat difficult.

[Lexur]

This is what I get now and it's running.

The only I need now is to know/understand what should I got to make the script stops the submission task until the text is changed to lower case.

There is something I must add to the form? Is something I'm missing in the function?

function countCaps()
{
val = 1;
var matchList = "1";
var regexp = /[A-Z]/g;
var text = document.getElementById("adtitle").value;
var myMsg='El texto contiene demasiadas mayusculas. Por favor use minusculas en sus textos.\n\n Gracias.';
while ((match = regexp.exec(text)) != null) {
matchList += val;
}

alert("Number: " + matchList.length);
alert("Percentage: " + matchList.length/text.length * 100 + "%");

var percentage = matchList.length/text.length * 100 ;

if ( percentage >= 30 ) {
alert( myMsg );
}
}

This is the form where the script should work on:

______________________

<form action="index.php" method="post" name="frmPost" onsubmit="countCaps()">

<input name="formtitle" type="text" id="adtitle" size="80" maxlength="100" value="">

<button type="submit">Send</button>

______________________

[vol7ron]

Okay I didn't under stand what you were asking at first. You want to cancel the submit if it meets a certain condition, right?

function countCaps()
{
   val = 1;
   var matchList = "1";
   var regexp = /[A-Z]/g;
   var text = document.getElementById("adtitle").value;
   var myMsg='El texto contiene demasiadas mayusculas. Por favor use minusculas en sus textos.\n\n Gracias.';
   
   while ((match = regexp.exec(text)) != null) {
      matchList += val;
   }
   
   alert("Number: " + matchList.length);
   alert("Percentage: " + matchList.length/text.length * 100 + "%");
   
   var percentage = matchList.length/text.length * 100 ;
   
   if ( percentage >= 30 ) {
      alert( myMsg );
      return false;
   }   
   return true;
}
______________________
   
<form action="index.php" method="post" name="frmPost" onsubmit="return countCaps()">   
   <input name="formtitle" type="text" id="adtitle" size="80" maxlength="100" value="">   
   <button type="submit">Send</button>
</form>

Please notice the returns in the form and the function.


vol7ron

[vol7ron]

Warning: you changed matchList to store the string "1".

This is a problem because you are returning the wrong numbers of capitals. What the function does is go through your test and pull out each of the capitals and store it in the variable.

Given:
var matchList = "";
var myMsg='El texto contiene demasiadas mayusculas. Por favor use minusculas en sus textos.\n\n Gracias.';
alert(matchList) would display "EPG". Length = 3.

In your code:
var matchList = "1";
var myMsg='El texto contiene demasiadas mayusculas. Por favor use minusculas en sus textos.\n\n Gracias.';
alert(matchList) would display "1EPG". Length = 4.

_________________________________________________

Note: RegExp are powerful using the one line you can easily change the function to mean something totally different.

For instance instead of only counting capitals throughout the text, you might want to count words with capitals; or even, words greater than one letter long; or maybe, only capitals inside of words, not including the first letter of the word. Then you could use another RegExp to count the number of words total.

So,

(# of capitals not including the first letter of the word)/(# of words total) * 100 = a more realistic %

vol7ron

[mehh]

(# of capitals not including the first letter of the word)/(# of words total) * 100 = a more realistic %

For this effect the regex needs to be changed to

/[^\b][A-Z]/g

[vol7ron]

Or you could do:

/\B[A-Z]/g[/3]

Also, this will give you the same result as the other function in less lines (it takes out the loop).

function countCaps() 
{ 
   var regexp = /[A-Z]/g; 
   var text = document.getElementById("adtitle").value; 
   var myMsg='El texto contiene demasiadas mayusculas. Por favor use minusculas en sus textos.\n\n Gracias.'; 
   
   var matchList = text.match(regexp);
   
   alert("Number: " + matchList.length); 
   alert("Percentage: " + matchList.length/text.length * 100 + "%"); 
   
   var percentage = matchList.length/text.length * 100 ; 
   
   if ( percentage >= 30 ) { 
      alert( myMsg ); 
      return false; 
   }  
   return true; 
} 

vol7ron

[Lexur]

Thanks a lot.

I have it working now and my forums look better without touch here and there.

Thanks eelixduppy, vol7ron and mehh.

Now, if I only could have another one which block posts in the boards beyond a given percentage of stupidity it would be great :))))