Is there a minlength validation attribute in HTML5

Question

It seems the minlength attribute for an  lt input gt  field doesn t work    Is there any other attribute in HTML5 with the help of which I can set the minimal length of a value for fields

User · Answer

My solution for textarea using jQuery and combining HTML5 required validation to check the minimum length   minlength js    document  ready function         form textarea minlength    on  keyup   function        e len     this  val   trim   length     e min len   Number   this  attr  minlength        message   e min len  lt   e len        e min len     characters minimum      this setCustomValidity message            HTML   lt form action    gt     lt textarea name  test min length  id    cols  30  rows  10  minlength  10  gt  lt  textarea gt   lt  form gt

User · Answer

minlength attribute is now widely supported in most of the browsers    lt input type  text  minlength  2  required gt    But  as with other HTML5 features  IE11 is missing from this panorama  So  if you have a wide IE11 user base  consider using the pattern HTML5 attribute that is supported almost across the board in most browsers  including IE11    To have a nice and uniform implementation and maybe extensible or dynamic  based on the framework that generate your HTML   I would vote for the pattern attribute    lt input type  text  pattern    2    required gt    There is still a small usability catch when using pattern  The user will see a non-intuitive  very generic  error warning message when using pattern  See this jsfiddle or below    x000D   x000D   lt h3 gt In each form type 1 character and press submit lt  h3 gt  x000D   lt  h2 gt  x000D   lt form action     gt  x000D    Input with minlength   lt input type  text  minlength  2  required name  i1  gt  x000D     lt input type  submit  value  Submit  gt  x000D   lt  form gt  x000D   lt br gt  x000D   lt form action     gt  x000D    Input with patern   lt input type  text  pattern    2    required name  i1  gt  x000D     lt input type  submit  value  Submit  gt  x000D   lt  form gt  x000D   x000D   x000D    For example  in Chrome  but similar in most browsers   you will get the following error messages   Please lengthen this text to 2 characters or more  you are currently using 1 character    by using minlength and  Please match the format requested   by using pattern

User · Answer

I used max and min then required  and it worked for me very well  but what am not sure is if it is a but coding method   lt input type  quot text quot  maxlength  quot 13 quot  name   quot idnumber quot  class  quot form-control quot   minlength  quot 13 quot  required gt

User · Answer

The minLength attribute  unlike maxLength  does not exist natively in HTML5  However  there a some ways to validate a field if it contains less than x characters  An example is given using jQuery at this link  http   docs jquery com Plugins Validation Methods minlength  lt html gt       lt head gt           lt script src  quot http   code jquery com jquery-latest js quot  gt  lt  script gt           lt script type  quot text javascript quot  src  quot http   jzaefferer github com jquery-validation jquery validate js quot  gt  lt  script gt           lt script type  quot text javascript quot  gt              jQuery validator setDefaults                   debug  true                  success   quot valid quot                            lt  script gt            lt script gt                document  ready function                       quot  myform quot   validate                       rules                            field                                required  true                              minlength  3                                                                                              lt  script gt       lt  head gt        lt body gt           lt form id  quot myform quot  gt               lt label for  quot field quot  gt Required  Minimum length 3   lt  label gt               lt input class  quot left quot  id  quot field quot  name  quot field quot    gt               lt br  gt               lt input type  quot submit quot  value  quot Validate  quot    gt           lt  form gt       lt  body gt    lt  html gt

User · Answer

I used maxlength and minlength with or without required and it worked for me very well for HTML5    x000D   x000D   lt input id  passcode  type  password  minlength  8  maxlength  10  gt  x000D   x000D   x000D

User · Answer

In my case  in which I validate the most manually and using Firefox  43 0 4   minlength and validity tooShort are not available unfortunately   Since I only need to have minimum lengths stored to proceed  an easy and handy way is to assign this value to another valid attribute of the input tag  In that case then  you can use min  max  and step properties from  type  number   inputs   Rather than storing those limits in an array it s easier to find it stored in the same input instead of getting the element id to match the array index

User · Answer

Yes  there it is  It s like maxlength  W3 org documentation  http   www w3 org TR html5 forms html attr-fe-minlength  In case minlength doesn t work  use the pattern attribute as mentioned by  Pumbaa80 for the input tag   For textarea  For setting max  use maxlength and for min go to this link   You will find here both for max and min

User · Answer

See http   caniuse com  search minlength  Some browsers may not support this attribute   If the value of the  quot type quot  is one of them  text  email  search  password  tel  or URL  warning  not include number   no browser support  quot tel quot  now - 2017 10  Use the minlength   maxlength  attribute  It specifies the minimum number of characters  For example   lt input type  quot text quot  minlength  quot 11 quot  maxlength  quot 11 quot  pattern  quot  0-9   quot  placeholder  quot input your phone number quot  gt   Or use the  quot pattern quot  attribute   lt input type  quot text quot  pattern  quot  0-9  11  quot  placeholder  quot input your phone number quot  gt   If the  quot type quot  is number  although minlength   maxlength  is not be supported  you can use the min   max  attribute instead of it  For example   lt input type  quot number quot  min  quot 100 quot  max  quot 999 quot  placeholder  quot input a three-digit number quot  gt

User · Answer

I notice that sometimes in Chrome when autofill is on and the fields are field by the autofill browser build in method  it bypasses the minlength validation rules  so in this case you will have to disable autofill by the following attribute  autocomplete  quot off quot   lt input autocomplete  quot new-password quot  name  quot password quot  id  quot password quot  type  quot password quot  placeholder  quot Password quot  maxlength  quot 12 quot  minlength  quot 6 quot  required   gt

User · Answer

New version   It extends the use  textarea and input  and fixes bugs      Author  Carlos Machado    Version  0 2    Year  2015 window onload   function         function testFunction evt            var items   this elements          for  var j   0  j  lt  items length  j                  if   items j  tagName     INPUT     items j  tagName     TEXTAREA    amp  amp  items j  hasAttribute  minlength                      if  items j  value length  lt  items j  getAttribute  minlength    amp  amp  items j  value                              items j  setCustomValidity  The minimum number of characters is     items j  getAttribute  minlength                               items j  focus                        evt defaultPrevented                      return                                    else                       items j  setCustomValidity                                                          var isOpera     window opera    navigator userAgent indexOf   OPR     gt   0      var isChrome     window chrome  amp  amp   isOpera      if  isChrome            var forms   document getElementsByTagName  form            for var i   0  i  lt  forms length  i                  forms i  addEventListener  submit   testFunction true               forms i  addEventListener  change   testFunction true

User · Answer

You can use the pattern attribute  The required attribute is also needed  otherwise an input field with an empty value will be excluded from constraint validation    lt input pattern    3      required title  3 characters minimum  gt   lt input pattern    5 10   required title  5 to 10 characters  gt    If you want to create the option to use the pattern for  empty  or minimum length   you could do the following    lt input pattern    0    5 10   required title  Either 0 OR  5 to 10 chars   gt   lt input pattern    0    8      required title  Either 0 OR  8 chars minimum   gt

User · Answer

Add both a maximum and a minimum value  You can specify the range of allowed values   lt input type  quot number quot  min  quot 1 quot  max  quot 999 quot    gt

User · Answer

Here is HTML5-only solution  if you want minlength 5  maxlength 10 character validation   http   jsfiddle net xhqsB 102    lt form gt     lt input pattern    5 10   gt     lt input type  submit  value  Check  gt  lt  input gt   lt  form gt

User · Answer

Not HTML5  but practical anyway  if you happen to use AngularJS  you can use ng-minlength for both inputs and textareas  See also this Plunk

User · Answer

I wrote this JavaScript code   minlength js    window onload   function         function testaFunction evt            var elementos   this elements          for  var j   0  j  lt  elementos length  j                  if  elementos j  tagName     TEXTAREA   amp  amp  elementos j  hasAttribute  minlength                      if  elementos j  value length  lt  elementos j  getAttribute  minlength                          alert  The textarea control must be at least     elementos j  getAttribute  minlength       characters                         evt preventDefault                                                         var forms   document getElementsByTagName  form        for var i   0  i  lt  forms length  i              forms i  addEventListener  submit   testaFunction  true

User · Answer

If desired to make this behavior  always show a small prefix on the input field or the user can t erase a prefix        prefix  quot prefix text quot        If the user changes the prefix  restore the input with the prefix     if document getElementById  myInput   value substring 0 prefix length  localeCompare prefix          document getElementById  myInput   value   prefix

User · Answer

There is a minlength property in the HTML5 specification now  as well as the validity tooShort interface  Both are now enabled in recent versions of all modern browsers  For details  see https   caniuse com  search minlength

[html] Is there a minlength validation attribute in HTML5?

minlength.js

HTML

Examples related to html

Examples related to html5-validation