23

Is there a way in HTML5 forms to add a min and max character to a textarea? It seems I can apply it to a regular input using pattern.

<input pattern=".{3,}" title="3 characters minimum">

Am I looking at a jquery solution?

AbhiAbzs
  • 134
  • 2
  • 12
LeBlaireau
  • 17,133
  • 33
  • 112
  • 192

5 Answers5

43

HTML5 solution, min 5, max 20 characters

just set the attribute maxlength="20" and minlength="5" to the textarea tag

http://jsfiddle.net/xhqsB/603/

   <form>
      <textarea maxlength="20" minlength="5" required></textarea>
      <input type="submit" value="Check"></input>
   </form>
mre
  • 7
  • 1
  • 4
ladriangb
  • 551
  • 5
  • 8
  • 3
    Note that this is [currently not well supported by browsers](http://caniuse.com/#search=minlength) – ba0708 Sep 02 '15 at 10:56
  • 1
    Now it looks like all the browsers except IE/Edge – Anthony Nov 07 '17 at 23:01
  • 7
    This did not work for me. I had to add the `required` property to the `textarea` and that fired the validation. I'm using Google Chrome, Version 64.0.3282.167 (Official Build) (64-bit) on Windows 10. – Script47 Feb 14 '18 at 17:48
  • Now that this is supported by [90% of web users](https://caniuse.com/#search=minlength), this should be the accepted answer. – Carlos Roldán Mar 21 '19 at 19:12
13

For max: see below code
Use maxlength for maximum character. 

maxlength="nuber_of_characters"

Source: http://www.w3.org/TR/html5/forms.html#the-textarea-element

For min: source
Use Javascript as below:
use id attribute in <textarea>. Set id attribute to minle(for eg) ie id="minle" 

<textarea rows="10" cols="80" maxlength="200" required id="minle" >
</textarea>

and put following js code segment in your form tag

  <form action="mango.php" method="post" id="form12" onsubmit="var text = document.getElementById('minle').value; if(text.length < 80) { alert('put more info!'); return false; } return true;">

This allow user to input no. of characters from 80 to 200.

Sohel Ahmed Mesaniya
  • 3,344
  • 1
  • 23
  • 29
1

HTML5 solution, min 5, max 10 characters

http://jsfiddle.net/xhqsB/102/

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
Ali Çarıkçıoğlu
  • 1,304
  • 1
  • 12
  • 21
  • 4
    And what about `min`? – Mr. Alien Aug 12 '13 at 10:40
  • was more the validation - in html5 I use required pattern="[^ @]*@[^ @]*" /> for email addresses is great but textareas do not have this but I would have though a max-min in html5 was pretty desirable. – LeBlaireau Aug 12 '13 at 10:44
  • 2
    @AliCarikcioglu nice, but *Is there a way in HTML5 forms to add a mix and min character to a **textarea**?* – Mr. Alien Aug 14 '13 at 13:10
1

You can use minlength=20. Do not use "".

For exp true: minlength=20
False exp: minlength="20"

Federica Benacquista
  • 835
  • 11
  • 25
Umut Can Arda
  • 81
  • 1
  • 8
1
<textarea
  name="myTextarea"
  minlength="10"
  maxlength="50"
  required
></textarea>

You need to have minlength, maxlength AND required in textarea

KimchiMan
  • 4,836
  • 6
  • 35
  • 41