'How to apply min and max on textarea?

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?

htmlformstextareacharactermin


Solution 1:[1]

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>

Solution 2:[2]

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.

Solution 3:[3]

HTML5 solution, min 5, max 10 characters

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>

Solution 4:[4]

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

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

Solution 5:[5]

<textarea
  name="myTextarea"
  minlength="10"
  maxlength="50"
  required
></textarea>

You need to have minlength, maxlength AND required in textarea

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mre
Solution 2
Solution 3
Solution 4 Federica Benacquista
Solution 5 KimchiMan

Related Questions