Javascript check text limit on submit

Question

I have this JQuery code to limit text in a textarea to 250 characters:

    $('#postform textarea').keypress(function() {
         if($(this).val().length >= 250) {
            $(this).val($(this).val().slice(0, 250));
            return false;
        }
    });

Is it possible to change this code so users can type past the limit in the textarea, then when the user clicks the submit button it shows an alert if it is over the limit.

Any help appreciated.

Louis Barranqueiro · Accepted Answer · 2016-01-02T11:27:12.807

1

Instead of keypress event use sumbit event on your form :

$('#form').submit(function(event) {
    var $textarea = $(this).find('textarea')
    if($textarea.val().length >= 250) {
        // do what you want
        // show an error or
        // E.g : highlight the textarea in red
        $textarea.addClass('input-error');
        return false;
    }
    else {
        $textarea.removeClass('input-error');
    }
});

.input-error {
  border-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="" method="form">
  <textarea></textarea>
  <button type="submit">Submit</button>
  </form>

edited Jan 02 '16 at 11:27

answered Jan 02 '16 at 11:14

Louis Barranqueiro

10,058
6
42
52

Remove `event.preventDefault();` or the `form` would never be submited – A. Wolff Jan 02 '16 at 11:19
no, because otherwise the form will be submitted. I put it in error case. Thank you – Louis Barranqueiro Jan 02 '16 at 11:23
But `return false;` (in jQuery handler) is alias for `event.stopPropagation();` & `event.preventDefault();`. So use one or the other but here your code is redundant – A. Wolff Jan 02 '16 at 11:25
Oh I didn't know that. Thank you – Louis Barranqueiro Jan 02 '16 at 11:26

score 1 · Answer 2 · answered Jan 02 '16 at 11:15

Try to use maxlength attribute.

<textarea rows="4" cols="50" maxlength="10" placeholder='You can type just 10 characters'>
</textarea>

NOTE : The maxlength attribute of the textarea tag is not supported in Internet Explorer 9 and earlier versions, or in Opera 12 and earlier versions.

Hope this helps.

score 0 · Answer 3 · answered Jan 02 '16 at 11:17

0

Yes you can. You just need to do a check on submission of the textarea and see that it isn't over the limit.

$('#my-form').submit(function() {
    if($('input[name="myTextArea"]').length >= 250) {
     alert("Hey your text is over 250");
    }
})

answered Jan 02 '16 at 11:17

ngoctranfire

793
9
15

Sahil · Answer 4 · 2016-01-02T11:29:52.923

You can actually have a message displaying characters left and whenever the user exceeds the limit and clicks on submit an alert box is displayed.

$('#postform textarea').keypress(function() {
         var c_left = lettersTyped($(this));
         if((c_left-20) < 0){
           $('p').html(20-c_left+' characters left').removeClass('error');
         }
         else{
           $('p').html('Limit exceeded!').addClass('error');
           }
    });
    function lettersTyped(text){
      var len = text.val().length;        
      return len;
    }

       $('#postform .submit').on('click', function(){
         var text = $('#postform textarea');
         if(lettersTyped(text) > 20){
          alert('You have exceeded the limit');
         }
         else{
          //not submitting the form here, but you can keep it true. 
          return false;
         }
       });

p{
color: lightgreen;
}
.error{
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form id="postform">
 <textarea placeholder="Start typing.."></textarea>
 <p></p>
 <input type="submit" class="submit"/>
</form>

score 0 · Answer 5 · answered Jan 02 '16 at 11:22

0

$('#postform').submit(function() {
     if($('#postform textarea').val().length >= 250) {
        //message
        return false;
     }
     return true;
});

answered Jan 02 '16 at 11:22

Oxi

2,918
17
28

1

While this code may answer the question, it is better to explain what it does and add some references to it. – Hamid Pourjam Jan 02 '16 at 12:02

Javascript check text limit on submit

5 Answers5