Is there a minlength validation attribute in HTML5?

html html5-validation

It seems the minlength attribute for an <input> 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?

It won't be the answer for every field, but if you just want to make sure a value is there you can use the "required" attribute.

Possible Duplicate: stackoverflow.com/questions/5533053/textarea-character-limit/…

It doesn't exist, but let's make a fuss and get it in! w3.org/Bugs/Public/show_bug.cgi?id=20557

You need to use JS/Jquery if you want to do a full implementation (eg. required, minlength, error message when submitting etc). Safari still does not fully support even the required attribute, and only Chrome and Opera support minLength. eg see caniuse.com/#search=required

Martijn

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)">

+1 for using html5 instead of jQuery. I just wanted to add that the title attribute allows you to set the message to display to the user if the pattern is not met. Otherwise a default message will be shown.

@J.Money It still says "Please match the requested format: ". Is there a way to bypass the prior default message? </div> <div class="p-3 mb-2 bg-light border rounded"> Unfortunately this is not supported for textareas. </div> <div class="p-3 mb-2 bg-light border rounded"> @ChaZ @Basj You can add a custom error message by adding the following attribute: <code>oninvalid="this.setCustomValidity('Your message')"</code> </div> <div class="p-3 mb-2 bg-light border rounded"> If you enters an invalid input and you're using <code>setCustomValidity</code>, then it will continue to show you the error message even after you corrected the input. You can use the following <code>onchange</code> method to counter this. <b><code>oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"</code></b> </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> There <strong>is</strong> a <code>minlength</code> property in <a href="http://www.w3.org/TR/html5/forms.html#the-maxlength-and-minlength-attributes" rel="noreferrer">the HTML5 specification</a> now, as well as the <code>validity.tooShort</code> interface. </p> <p class="mb-0 text-dark "> Both are now enabled in recent versions of all modern browsers. For details, see <a href="https://caniuse.com/#search=minlength" rel="noreferrer">https://caniuse.com/#search=minlength</a>. </p> <hr class="my-4"> <div> <div class="comment"> <div class="p-3 mb-2 bg-light border rounded"> I see this, but still it is not working for me. I have required set as well, but still not validating against the minlength. not sure why. </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">A</span> </span></div> <div class=" ms-3 w-100"> <small>Ali Çarıkçıoğlu</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> Here is HTML5-only solution (if you want minlength 5, maxlength 10 character validation) </p> <p class="mb-0 text-dark "> <strong><a href="http://jsfiddle.net/xhqsB/102/" rel="noreferrer">http://jsfiddle.net/xhqsB/102/</a></strong> </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><form> <input pattern=".{5,10}"> <input type="submit" value="Check"></input> </form> </code></pre> <hr class="my-4"> <div> <div class="comment"> <div class="p-3 mb-2 bg-light border rounded"> How to set a custom error message if the field is not Ok? </div> <div class="p-3 mb-2 bg-light border rounded"> For custom message add <code>title</code> attribute with the required message. </div> <div class="p-3 mb-2 bg-light border rounded"> The same <code>pattern</code> answer has been given <a href="http://stackoverflow.com/a/10294291/1269037">a few months earlier</a>. How is this answer better? </div> <div class="p-3 mb-2 bg-light border rounded"> @DanDascalescu He didn't have form tags and a clear explanation. I also included a working jsfiddle demo. (btw Stackoverflow rules say that it's not forbidden to give similar answers as long as it's helpful to the community) </div> <div class="p-3 mb-2 bg-light border rounded"> One way to give an even better answer is to include the demo here on SO as a <a href="https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/">runnable code snippet</a>. </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">C</span> </span></div> <div class=" ms-3 w-100"> <small>Community</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> Yes, there it is. It's like maxlength. W3.org documentation: <a href="http://www.w3.org/TR/html5/forms.html#attr-fe-minlength" rel="nofollow noreferrer">http://www.w3.org/TR/html5/forms.html#attr-fe-minlength</a> </p> <p class="mb-0 text-dark "> In case <code>minlength</code> doesn't work, use the <code>pattern</code> attribute as mentioned by @Pumbaa80 for the <code>input</code> tag. </p> <p class="mb-0 text-dark "> <strong>For textarea:</strong> For setting max; use <code>maxlength</code> and for min go to <a href="https://stackoverflow.com/questions/18184791/how-to-apply-min-and-max-on-textarea/24640346#24640346">this link</a>. </p> <p class="mb-0 text-dark "> You will find here both for max and min. </p> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">b</span> </span></div> <div class=" ms-3 w-100"> <small>benaff033</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> I used maxlength and minlength with or without <code>required</code> and it worked for me very well for HTML5. </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> <input id="passcode" type="password" minlength="8" maxlength="10"> </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> ` </p> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">G</span> </span></div> <div class=" ms-3 w-100"> <small>Gabriel Petrovay</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> <code>minlength</code> attribute is now widely supported in <a href="https://caniuse.com/#feat=input-minlength" rel="noreferrer">most of the browsers</a>. </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input type="text" minlength="2" required> </code></pre> <p class="mb-0 text-dark "> But, as with other HTML5 features, IE11 is missing from this panorama. So, if you have a wide IE11 user base, consider using the <code>pattern</code> HTML5 attribute that is supported almost across the board in <a href="https://caniuse.com/#feat=input-pattern" rel="noreferrer">most browsers</a> (including IE11). </p> <p class="mb-0 text-dark "> 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 <code>pattern</code> attribute: </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input type="text" pattern=".{2,}" required> </code></pre> <p class="mb-0 text-dark "> There is still <strong>a small usability catch</strong> when using <code>pattern</code>. The user will see a non-intuitive (very generic) error/warning message when using <code>pattern</code>. See <a href="https://jsfiddle.net/a4cdwkgf/" rel="noreferrer">this jsfiddle</a> or below: </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> <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> </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> For example, in Chrome (but similar in most browsers), you will get the following error messages: </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code>Please lengthen this text to 2 characters or more (you are currently using 1 character) </code></pre> <p class="mb-0 text-dark "> by using <code>minlength</code> and </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code>Please match the format requested </code></pre> <p class="mb-0 text-dark "> by using <code>pattern</code>. </p> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> 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: </p> <p class="mb-0 text-dark "> autocomplete="off" </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required /> </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> 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. </p> <p class="mb-0 text-dark "> An example is given using jQuery at this link: <a href="http://docs.jquery.com/Plugins/Validation/Methods/minlength" rel="nofollow noreferrer">http://docs.jquery.com/Plugins/Validation/Methods/minlength</a> </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><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> </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">i</span> </span></div> <div class=" ms-3 w-100"> <small>isherwood</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> Not HTML5, but practical anyway: if you happen to use <strong>AngularJS</strong>, you can use <a href="https://docs.angularjs.org/api/ng/directive/input" rel="nofollow noreferrer"><code>ng-minlength</code></a> (or <code>data-ng-minlength</code>) for both inputs and textareas. See also <a href="http://plnkr.co/edit/GotWYIwosmrokXCul249" rel="nofollow noreferrer">this Plunk</a>. </p> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> My solution for textarea using jQuery and combining HTML5 required validation to check the minimum length. </p> <p class="mb-0 text-dark "> minlength.js </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code>$(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) }) }) </code></pre> <p class="mb-0 text-dark "> HTML </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><form action=""> <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea> </form> </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> See <em><a href="http://caniuse.com/#search=minlength" rel="nofollow noreferrer">http://caniuse.com/#search=minlength</a></em>. Some browsers may not support this attribute. </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> If the value of the "type" is one of them: </p> <p class="mb-0 text-dark "> text, email, search, password, tel, or URL (warning: not include number | no browser support "tel" now - 2017.10) </p> <p class="mb-0 text-dark "> Use the minlength(/ maxlength) attribute. It specifies the minimum number of characters. </p> <p class="mb-0 text-dark "> For example, </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number"> </code></pre> <p class="mb-0 text-dark "> Or use the "pattern" attribute: </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input type="text" pattern="[0-9]{11}" placeholder="input your phone number"> </code></pre> <p class="mb-0 text-dark "> If the "type" is number, although minlength(/ maxlength) is not be supported, you can use the min(/ max) attribute instead of it. </p> <p class="mb-0 text-dark "> For example, </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input type="number" min="100" max="999" placeholder="input a three-digit number"> </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> New version: </p> <p class="mb-0 text-dark "> It extends the use (textarea and input) and fixes bugs. </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code>// 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); } } } </code></pre> <hr class="my-4"> <div> <div class="comment"> <div class="p-3 mb-2 bg-light border rounded"> Thanks for this elegant updated solution. Does it work outside of Chrome/Opera since they don't support minlength? <a href="http://caniuse.com/#search=minlength" rel="nofollow noreferrer">caniuse.com/#search=minlength</a> I just tested it on Mac Safari and it doesn't work :( I see you are adding the eventListener for non Chrome/Opera browsers, so maybe I am doing something wrong. </div> <div class="p-3 mb-2 bg-light border rounded"> After debugging Safari it seems that var items = this.elements; is returning the FORMS collection, not the items in the form. Weird. </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> I wrote this JavaScript code, [minlength.js]: </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code>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); } } </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">C</span> </span></div> <div class=" ms-3 w-100"> <small>Christian Læirbag</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> In my case, in which I validate the most manually and using Firefox (43.0.4), <code>minlength</code> and <code>validity.tooShort</code> are not available unfortunately. </p> <p class="mb-0 text-dark "> 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 <code>min</code>, <code>max</code>, and <code>step</code> properties from [type="number"] inputs. </p> <p class="mb-0 text-dark "> 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. </p> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> 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. </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input type="text" maxlength="13" name ="idnumber" class="form-control" minlength="13" required> </code></pre> <hr class="my-4"> <div> <div class="comment"> <div class="p-3 mb-2 bg-light border rounded"> What do you mean by "a but coding method"? </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> If desired to make this behavior, always show a small prefix on the input field or the user can't erase a prefix: </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code> // 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; </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">A</span> </span></div> <div class=" ms-3 w-100"> <small>Alexandre Desroches</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> Following @user123444555621 pinned answer. </p> <p class="mb-0 text-dark "> There is a <code>minlength</code> attribute in HTML5 but for some reason it may not always work as expected. </p> <p class="mb-0 text-dark "> <strong>I had a case where my input type text did not obey the <code>minlength="3"</code> property.</strong> </p> <p class="mb-0 text-dark "> By using the <code>pattern</code> attribute I managed to fix my problem. <strong>Here's an example of using pattern to ensure minlength validation:</strong> </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> 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> </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> <strong>For further details</strong>, here's the MDN link to the HTML pattern attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern</a> </p> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">S</span> </span></div> <div class=" ms-3 w-100"> <small>Sriram Sundarajan</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> You can use <code>minlength</code> 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. </p> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">A</span> </span></div> <div class=" ms-3 w-100"> <small>A'dii Sunlay</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> Smartest Way for maxlength </p> <p class="mb-0 text-dark "> </p> <p class="mb-0 text-dark "> $("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"> </p> <p class="mb-0 text-dark "> </p> <hr class="my-4"> <div> <div class="comment"> <div class="p-3 mb-2 bg-light border rounded"> If you have a new question, please ask it by clicking the <a href="https://stackoverflow.com/questions/ask">Ask Question</a> button. Include a link to this question if it helps provide context. - <a href="/review/late-answers/31494183">From Review</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">P</span> </span></div> <div class=" ms-3 w-100"> <small>Peter Mortensen</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> Add both a maximum and a minimum value. You can specify the range of allowed values: </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><input type="number" min="1" max="999" /> </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> </p> </div> </div> <div class="col-xl-3"> <div class="d-flex flex-row justify-content-start align-items-center bg-light mb-3 mt-8 py-2 rounded"> <div class="flex-fill"> <span class="avatar avatar-xl "> <img src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/images/brand/qrcode_for_gh.jpg?t=20230125' class="rounded w-100 mx-2" alt="关注公众号,不定期副业成功案例分享"/> </span> </div> <div class="flex-fill text-left"> <div class="mx-1"> <h5 class="mb-2 mt-3 ">Follow WeChat</h5> <p>Success story sharing</p> </div> </div> </div> <div class="card card-bordered mb-0 card-hover cursor-pointer"> <div class="card-body"> <h4 class="py-2"> Want to <span class="text-danger">stay one step ahead</span> of the latest teleworks? </h4> <a type="button" class="btn btn-sm btn-outline-primary rounded-pill w-100" href="/admin/payments.html" >Subscribe Now</a> </div> </div> <div class="mt-2 cursor-pointer"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8339074668991438" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8339074668991438" data-ad-slot="7889891166" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card mb-4 mt-4 border"> <div>  <div class="card-header"> <h4 class="mb-0">相似问题</h4> </div> <ul class="list-group list-group-flush"> <li class="list-group-item bg-transparent"> <a href="/qa/7Q3W">Make a div fill the height of the remaining screen space</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/LPlo">jQuery disable/enable submit button</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/w73Q">How to store objects in HTML5 localStorage</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/oLew">Selecting element by data attribute with jQuery</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/Ld5n">How do I create an HTML button that acts like a link?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/JAgx">How can I set the default value for an HTML <select> element?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/QEOL">What is the purpose of the "role" attribute in HTML?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/VgWl">Is there a float input type in HTML5?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/MKxO">An invalid form control with name='' is not focusable</a> </li> </ul> </div> </div> </div> </div> </div> </div>  <div class="pt-lg-5 pt-3 footer bg-white"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 col-12"> <div class="mb-4"> <img src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/images/brand/logo/logo.png?t=20230125' style="width:30%"> <div class="mt-4"> <p> HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable. </p> <div class="fs-4 mt-4"> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle fe fe-globe " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> English </button> <div class="dropdown-menu"> <a class="dropdown-item" href="https://www.huntsbot.com/qa/qw5o?lang=zh_CN"> 简体中文 </a> <a class="dropdown-item" href="https://www.huntsbot.com/qa/qw5o?lang=en_US"> English </a> </div> </div> </div> </div> </div> </div> <div class="offset-lg-1 col-lg-2 col-md-3 col-6 hidden-less750"> <div class="mb-4"> <h3 class="fw-bold mb-3"> Platform </h3> <ul class="list-unstyled nav nav-footer flex-column nav-x-0"> <li> <a href="/telework.html" class="nav-link"> Outsource </a> </li> <li> <a href="/remote-job.html" class="nav-link"> Remote Job </a> </li> <li> <a href="/products.html" class="nav-link"> Products </a> </li> <li> <a href="/weekly.html" class="nav-link"> Newsletter </a> </li> <li> <a href="/pages/price.html" class="nav-link"> Pricing </a> </li> </ul> </div> </div> <div class="col-lg-2 col-md-3 col-6 hidden-less750"> <div class="mb-4"> <h3 class="fw-bold mb-3"> Support </h3> <ul class="list-unstyled nav nav-footer flex-column nav-x-0"> <li> <a href="/pages/about.html" class="nav-link"> About </a> </li> <li> <a href="/pages/faq.html" class="nav-link"> Frequently Asked Questions </a> </li> <li> <a href="/pages/faq.html" class="nav-link"> How to subscribe </a> </li> </ul> <h3 class="fw-bold my-3"> Links </h3> <ul class="list-unstyled nav nav-footer flex-column nav-x-0"> <li> <a href="https://tlr.xinbeitime.com/" class="nav-link" target="_blank"> 网球实时排名 </a> </li> <li> <a href="https://snapvideotools.com/" class="nav-link" target="_blank"> SnapVideoTools </a> </li> <li> <a href="https://tennisliveranking.com/" class="nav-link" target="_blank"> ATP/WTA/ITF Live Ranking </a> </li> </ul> </div> </div> <div class="col-lg-3 col-md-12 hidden-less750">  <div class="mb-4"> <h3 class="fw-bold mb-3"> Contact US </h3> <p> Any questions or suggestions during use, you can contact us in the following ways: </p> <p> Email: <a href="mailto:huntsbot@xinbeitime.com"> huntsbot@xinbeitime.com </a> </p> </div> </div> </div> <div class="row align-items-center g-0 border-top py-2 mt-6">  <div class="col-lg-8 col-md-7 col-12"> <span class="fs-5"> Copyright© 2022-2023 www.huntsbot.com <a href="https://beian.miit.gov.cn/" rel="noindex,nofollow" target="_blank" class="text-reset">浙ICP备2022000860号-4</a> All Rights Reserved. </span> </div>  <div class="col-lg-4 col-md-5 col-12 d-md-flex justify-content-end hidden-less750"> <nav class="nav nav-footer"> <a class="nav-link ps-0" href="/pages/disclaimer.html" target="_blank"> Disclaimer </a> <a class="nav-link px-2 px-md-3" href="/pages/privacy_policy.html" target="_blank"> Privacy Policy </a> <a class="nav-link px-2 px-md-3" href="/pages/terms_of_ervice.html" target="_blank"> Terms of Service </a> </nav> </div> </div> </div> </div>  <div class="modal fade" id="showQrCodeModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content "> <div class="modal-header"> <h5 class="modal-title " id="exampleModalLabel">微信公众号</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div class="modal-body"> <img src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/images/brand/qrcode_for_gh.jpg?t=20230125' class="rounded w-100" title="火星来客微信公众号" alt="火星来客微信公众号"> </div> </div> </div> </div> <div class="modal fade" id="modal-alert" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered " role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal-alert-title" >Tips</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="modal-alert-body"> </div> </div> </div> </div> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-alert" style="display:none" id="btn-common-alert"></button> <div class="modal fade" id="model-confirm" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-sm" role="document"> <div class="modal-content"> <div class="modal-body" id="modal-confirm-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">No</button> <button type="button" class="btn btn-primary btn-sm" id="btn-confirm-yes" btn-type="ajaxButton">Yes</button> </div> </div> </div> </div> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#model-confirm" style="display:none" id="btn-common-confirm" ></button> <script > function alertError(message){ alertError(message,"Tips"); } function alertError(message,title){ if(title){ $("#modal-alert-title").html(title); } $("#modal-alert-body").html(message); $("#btn-common-alert").trigger("click"); } function confirmDialog(confirmMessage,actionUrl,actionSuccessMsg){ $("#modal-confirm-body").html(confirmMessage); $("#btn-confirm-yes").attr("data-url",actionUrl); $("#btn-confirm-yes").attr("data-message",actionSuccessMsg); $("#btn-common-confirm").trigger("click"); } </script>   <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/jquery/dist/jquery.min.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/bootstrap-select/dist/js/bootstrap-select.min.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/jquery.form/jquery.form.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/js/custom.js?t=20230125'></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?b25fc3fcffc44e8dff36dde049b4ebc1"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "fco75ff5x7"); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-BTLS35QW08"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-BTLS35QW08'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?a01aa87a04ac652b13258f439e7407fed09ba9bea51f9e0f26ab91ccc91c1924bc434964556b7d7129e9b750ed197d397efd7b0c6c715c1701396e1af40cec962b8d7c8c6655c9b00211740aa8a98e2e"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> </body> </html>