How to apply min and max on textarea?

Question

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?

Riga

see the link https://mcmap.net/q/63764/-is-there-a-minlength-validation-attribute-in-html – Jaundice

here is an example jsfiddle.net/xhqsB/104 – Sheets

Answer 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>

Pasticcio

Note that this is currently not well supported by browsers – Lactalbumin

Now it looks like all the browsers except IE/Edge – Scornful

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. – Bund

Now that this is supported by 90% of web users, this should be the accepted answer. – Cowlick

Answer 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.

Bhayani

action="" is not valid in html5 – Goulden

@Goulden yes it is, but i have intentionally left it blank to draw more focus on validatoin. Ok I am editing now. – Bhayani

Answer 3

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

You need to have minlength, maxlength AND required in textarea

Erlene

required is mandatory, else minlength will not work. – Marriott

Answer 4

HTML5 solution, min 5, max 10 characters

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

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

Sternmost

And what about min? – Alkene

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. – Riga

@AliCarikcioglu nice, but Is there a way in HTML5 forms to add a mix and min character to a textarea? – Alkene

Answer 5

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

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

Refrigerate