how to restrict the user to enter only 250 words in text area?

Question

i have created one form for user to submit a abstract. but while submitting i need to check weather they have added more than 250 words or not. i need to allow only 250 words . how to do this ?

i have tried some JavaScript but it works for only 250 character.

here is my code

function maxlength(element, maxvalue)
   {
  var q = eval("document.upload."+element+".value.length");
   var r = q - maxvalue;
   var msg = "Sorry, you have input "+q+" characters into the "+
  "text area box you just completed. It can return no more than "+
  maxvalue+" words to be processed. Please abbreviate "+
 "your text by at least "+r+" words";
    if (q > maxvalue) alert(msg);
      }

and my textarea is :

  <tr>
   <td><label>Abstract Details</label> </td>
 <td><label>Please enter data, at most 250 words:</label>
  <br/><textarea rows="6" cols="80"name="box_name"   onChange="maxlength('box_name', 250)" style="width: 257px; height: 131px;">    </textarea></td>
    </tr>
  <tr>

how to limit for 250 words .

thanks in advance

Take a look to given link, Answer is available : http://stackoverflow.com/questions/16395785/limit-the-characters-in-textarea-in-jquery — Bhargav Bhanderi, Apr 03 '15 at 06:58
Just split with `textarea`'s value with `space` and verify the `length` with `maxlength` — Mox Shah, Apr 03 '15 at 07:00
http://stackoverflow.com/questions/17909646/counting-and-limiting-words-in-a-textarea here you go first link from google when you search for it. — valar morghulis, Apr 03 '15 at 07:03

score 9 · Accepted Answer · edited May 23 '17 at 11:47

9

To prevent submitting form when there is more than 250 characters in the textarea, add id="box_id" to your textarea and add this event to form element:

onsubmit="return maxlength(getElementById('box_id'), 250);

Now in your function split this value by multiple spaces:

function maxlength(element, maxvalue){
    var q = element.value.split(/[\s]+/).length;
    if(q > maxvalue){
        var r = q - maxvalue;
        alert("Sorry, you have input "+q+" words into the "+
        "text area box you just completed. It can return no more than "+
        maxvalue+" words to be processed. Please abbreviate "+
        "your text by at least "+r+" words");
        return false;
    }
}

To take advantage from new HTML attributes, you can also add "pattern" attribute to textarea with regex limiting input to 250 words:

<textarea rows="6" cols="80"name="box_name"   onChange="maxlength(this, 250)" style="width: 257px; height: 131px;" 
    pattern="^(?:\b\w+\b[\s\r\n]*){1,250}$">
</textarea>

This regex pattern was taken from following SO thread, which touches similar problem with 250 words: Limit the number of words in a response with a regular expression

edited May 23 '17 at 11:47

Community

1
1

answered Apr 03 '15 at 07:01

n-dru

9,285
2
29
42

there was an extra semicolon in alert, after "words" - I removed it and tested, now it works. I also edited your msg text - changed word "characters" to "words" – n-dru Apr 03 '15 at 09:17
ya its working now . but the problem while submitting or on change it will show error msg if i entered more than 250 words . but after closing that alert msg its allowing to submit .(if word is more than 250 all so. ) how to fix it – Nayana Apr 03 '15 at 09:31
I edited the answer - the function must be invoked on submitting and return false to prevent submission. – n-dru Apr 03 '15 at 09:53
then i no need to use onchnage in textarea ? – Nayana Apr 03 '15 at 09:54
you don't need, delete onchange from textarea, but add `id` to reference it in form onsubmit event. – n-dru Apr 03 '15 at 09:56
I tried it also, works perfectly. Add return false after alert and return before `maxlength` function to return false in case of failure. – n-dru Apr 03 '15 at 10:03

Milind Anantwar · Answer 2 · 2015-04-03T09:20:00.070

1

If you want 250 characters, You can set the maxlength attribute to 250

if you want 250 words:

function maxlength(obj,wordLen){
   var len = obj.value.split(/[\s]+/);
   if(len.length > wordLen){
       alert("You cannot put more than "+wordLen+" words in this text area.");
   }
 }

Function Call:

onChange="maxlength(this, 250)"

Working Demo

edited Apr 03 '15 at 09:20

answered Apr 03 '15 at 06:56

Milind Anantwar

81,290
25
94
125

score 1 · Answer 3 · answered Apr 03 '15 at 07:05

use this:

function maxlength(element, maxvalue)
{
    var value = $(elment).val();
    var words = value.split(' ');

    var msg = 'Sorry, you have input ' + words.length + ' words into the ' +
        'text area you just completed. It can return no more than ' +
        maxvalue + ' words to be processed. Please abbreviate ' +
        'your text by at least ' + (words.length - maxvalue) + ' words';

    if (words.length > maxvalue) {
        alert(msg);
    }
}

score 0 · Answer 4 · answered Apr 03 '15 at 07:11

This statement eval("document.upload." + element + ".value.length") will return no of characters not words, if you want to limit 250 words then just split value of textarea with space and verify it with max words allowed and then return appropriate message:

You may try this code.

function maxlength(element, maxvalue) {
    var q = eval("document.upload." + element + ".value");
    var textLength = q.split(/\S+/).length - 1
    var r = textLength - maxvalue;
    var msg = "Sorry, you have input " + textLength + " characters into the " +
        "text area box you just completed. It can return no more than " + maxvalue + " words to be processed. Please abbreviate " +
        "your text by at least " + r + " words";
    if (textLength > maxvalue) alert(msg);
}

how to restrict the user to enter only 250 words in text area?

4 Answers4