Reputation: 13075

Is there a minlength validation attribute in HTML?

It seems the minlength attribute for an <input> field doesn't work.

Is there any other attribute in HTML with the help of which I can set the minimal length of a value for fields?

Upvotes: 664

Answers (21)

Nasser X

Reputation: 305

I've used the follow tag with numbers:

<input type="tel" class="form-control" name="Extension" id="Extension" required maxlength="4" minlength="4" placeholder="4 Digits" />

Upvotes: 0

Ali Çarıkçıoğlu

Reputation: 1305

Here is HTML5-only solution (if you want minlength 5, maxlength 10 character validation)

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

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

Upvotes: 24

A'dii Sunlay

Reputation: 1

Smartest Way for maxlength

$("html").on("keydown keyup change", "input", function(){
    var maxlength=$(this).attr('maxlength');    
    if(maxlength){  
        var value=$(this).val();
        if(value.length<=maxlength){
            $(this).attr('v',value);
        }
        else{
            $(this).val($(this).attr('v'));
        }   
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" maxlength="10">

Upvotes: 0

Alexandre Desroches

Reputation: 351

Following @user123444555621 pinned answer.

There is a minlength attribute in HTML5 but for some reason it may not always work as expected.

I had a case where my input type text did not obey the minlength="3" property.

By using the pattern attribute I managed to fix my problem. Here's an example of using pattern to ensure minlength validation:

const folderNameInput = document.getElementById("folderName");

folderNameInput.addEventListener('focus', setFolderNameValidityMessage);
folderNameInput.addEventListener('input', setFolderNameValidityMessage);

function setFolderNameValidityMessage() {
  if (folderNameInput.validity.patternMismatch || folderNameInput.validity.valueMissing) {
      folderNameInput.setCustomValidity('The folder name must contain between 3 and 50 chars');
  } else {
      folderNameInput.setCustomValidity('');
  }
}

:root {
  --color-main-red: rgb(230, 0, 0);
  --color-main-green: rgb(95, 255, 143);
}

form input {
  border: 1px solid black;
  outline: none;
}

form input:invalid:focus {
  border-bottom-color: var(--color-main-red);
  box-shadow: 0 2px 0 0 var(--color-main-red);
}

form input:not(:invalid):focus {
  border-bottom-color: var(--color-main-green);
  box-shadow: 0 2px 0 0 var(--color-main-green);
}

<form>
  <input
    type="text"
    id="folderName"
    placeholder="Your folder name"
    spellcheck="false"
    autocomplete="off"
    
    required
    minlength="3"
    maxlength="50"
    pattern=".{3,50}"
  />
  <button type="submit" value="Create folder">Create folder</button>
</form>

For further details, here's the MDN link to the HTML pattern attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

Upvotes: 2

Sriram Sundarajan

Reputation: 1

You can use minlength in input tag or you can regex pattern to check the number of character or even you can take the input and check the length of the character and then you can restrict based upon your requirement.

Upvotes: 0

mik01aj

Reputation: 12402

Not HTML5, but practical anyway: if you happen to use AngularJS, you can use ng-minlength (or data-ng-minlength) for both inputs and textareas. See also this Plunk.

Upvotes: 4

rhgb

Reputation: 4205

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.

Upvotes: 175

Valéry Stroeder

Reputation: 633

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

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
        <script type="text/javascript">
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });;
        </script>

        <script>
            $(document).ready(function(){
                $("#myform").validate({
                    rules: {
                        field: {
                            required: true,
                            minlength: 3
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <form id="myform">
            <label for="field">Required, Minimum length 3: </label>
            <input class="left" id="field" name="field" />
            <br/>
            <input type="submit" value="Validate!" />
        </form>
    </body>

</html>

Upvotes: 5

talsibony

Reputation: 8766

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="off"

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />

Upvotes: 5

levinit

Reputation: 504

See http://caniuse.com/#search=minlength. Some browsers may not support this attribute.

If the value of the "type" is one of them:

text, email, search, password, tel, or URL (warning: not include number | no browser support "tel" now - 2017.10)

Use the minlength(/ maxlength) attribute. It specifies the minimum number of characters.

For example,

<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">

Or use the "pattern" attribute:

<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">

If the "type" is number, although minlength(/ maxlength) is not be supported, you can use the min(/ max) attribute instead of it.

For example,

<input type="number" min="100" max="999" placeholder="input a three-digit number">

Upvotes: 4

Carlos Rafael

Reputation: 11

If desired to make this behavior, always show a small prefix on the input field or the user can't erase a prefix:

   // prefix="prefix_text"
   // 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;

Upvotes: 1

Humphrey

Reputation: 2817

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.

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>

Upvotes: 1

Deepti Gehlot

Reputation: 617

Add both a maximum and a minimum value. You can specify the range of allowed values:

<input type="number" min="1" max="999" />

Upvotes: -4

Christian Læirbag

Reputation: 338

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.

Upvotes: 1

Gabriel Petrovay

Reputation: 21934

minlength attribute is now widely supported in most of the browsers.

<input type="text" minlength="2" required>

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:

<input type="text" pattern=".{2,}" required>

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:

<h3>In each form type 1 character and press submit</h3>
</h2>
<form action="#">
  Input with minlength: <input type="text" minlength="2" required name="i1">
  <input type="submit" value="Submit">
</form>
<br>
<form action="#">
  Input with patern: <input type="text" pattern=".{2,}" required name="i1">
  <input type="submit" value="Submit">
</form>

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.

Upvotes: 8

benaff033

Reputation: 129

I used maxlength and minlength with or without required and it worked for me very well for HTML5.

<input id="passcode" type="password" minlength="8" maxlength="10">

Upvotes: 12

Hiep Dinh

Reputation: 652

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 <= e_len ? '' : e_min_len + ' characters minimum'
    this.setCustomValidity(message)
  })
})

HTML

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>

Upvotes: 4

Carlos Machado

Reputation: 133

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 < items.length; j++) {
            if ((items[j].tagName == "INPUT" || items[j].tagName == "TEXTAREA") && items[j].hasAttribute("minlength")) {
                if (items[j].value.length < items[j].getAttribute("minlength") && 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/') >= 0;
    var isChrome = !!window.chrome && !isOpera;
    if(!isChrome) {
        var forms = document.getElementsByTagName("form");
        for(var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', testFunction,true);
            forms[i].addEventListener('change', testFunction,true);
        }
    }
}

Upvotes: 2

Carlos Machado

Reputation: 133

I wrote this JavaScript code, [minlength.js]:

window.onload = function() {
    function testaFunction(evt) {
        var elementos = this.elements;
        for (var j = 0; j < elementos.length; j++) {
            if (elementos[j].tagName == "TEXTAREA" && elementos[j].hasAttribute("minlength")) {
                if (elementos[j].value.length < 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 < forms.length; i++) {
        forms[i].addEventListener('submit', testaFunction, true);
    }
}

Upvotes: 1

Sohel Ahmed Mesaniya

Reputation: 3450

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.

Upvotes: 12

user123444555621

Reputation: 153194

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.

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

If you want to create the option to use the pattern for "empty, or minimum length", you could do the following:

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">

Upvotes: 1415

Is there a minlength validation attribute in HTML?

Answers (21)

minlength.js

HTML

Related Questions