How to place a minlength on an input of type=text?

Question

Do you know how to put a minlength on an input of type text?

I tried:

minlength="2"

min="2"

pattern=".{2,}"

pattern="^.{2,}$"

For information, this my input:

<input type="text" class="form-control" name="firstname" id="firstname" placeholder="firstname" pattern="^.{2,}$" >

I tried on Chrome and it doesn't work. But it is working on Firefox. So I will try to search on this side.

Does this answer your question? [pattern for input type="text" with min and max number](https://stackoverflow.com/questions/30786775/pattern-for-input-type-text-with-min-and-max-number) — midnightgamer, Jan 17 '20 at 10:35
@NicolasMaties : i tried with required but it is the same result. — C.Ramp, Jan 17 '20 at 10:39
@midnightgamer i read this post but it won't work in my case, Because the text can be very long so i can put all the length in the pattern. — C.Ramp, Jan 17 '20 at 10:42
@cнŝdk it's a form and if the input is less than 2 characters, it must not submit the form. — C.Ramp, Jan 17 '20 at 10:46
are you sure you are uploading the file to overwrite the current one? Are you sure that you are force refreshing the page in the browser? 2 of the 4 methods you post will absolutely work in Chrome (any version). So the issue seems like your page is not being updated or you have something else going on (such as javascript or syntax errors outside of the shown code) — Martin, Jan 17 '20 at 10:51
@Martin I'm sure to refresh my page. I cleared the cache. i change my code to be sure that i am on the good page. and i see my changes. — C.Ramp, Jan 17 '20 at 10:54
@C.Ramp drop it in https://pastebin.com/ and let me know the URL. Thanks — Martin, Jan 17 '20 at 11:08

Rounin · Accepted Answer · 2020-01-17T10:59:07.100

3

The attribute minlength is absolutely correct:

minlength="2"

Working Example:

input:invalid {
  border: 1px dashed rgba(255, 0, 0, 0.5);
}

<form>
<input type="text" minlength="2" placeholder="Type here..." required />
<input type="submit">
</form>

You can see that if you try to submit the form before you have entered a valid value into the text input, the form will not submit and the browser will report an error message.

Further Reading:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength

edited Jan 17 '20 at 10:59

answered Jan 17 '20 at 10:34

Rounin

27,134
9
83
108

I'd like to add that without the `required` attribute the `minlength` **wont have an effect IF the input is left EMPTY** – Campiotti Jan 17 '20 at 10:37
i put "required" but the result is the same – C.Ramp Jan 17 '20 at 10:43
If you run the code snippet above, you'll see that the `` has a translucent red dashed line around it when it contains `0` or `1` characters, indicating that the value entered is invalid. When it has `2` or more characters entered the value is then recognised as valid. – Rounin Jan 17 '20 at 10:50
@Rounin I see, that's why i post this question. It is because I don't have this behaviour in my site. – C.Ramp Jan 17 '20 at 10:52
Have you run your markup through a validator like: https://validator.w3.org/nu/ ? – Rounin Jan 17 '20 at 10:53
1

@Rounin I forgot to do this. So i did it but i don't have errors. – C.Ramp Jan 17 '20 at 10:58
@C.Ramp does the code snippet in Rounin's answer work correctly for you on your browser? – Martin Jan 17 '20 at 11:03
@Martin when i do a new page with Rounin's code, it works. but put in my code, it doesn't work. – C.Ramp Jan 17 '20 at 11:06
2

@C.Ramp then you need to find what's up with your page -- is there Javascript on it? I/we can't help much more, but the answer to the question you asked is definitely here ^^ . Why that answer isn't working in this case is impossible to judge without seeing more code evidence. Sorry. – Martin Jan 17 '20 at 11:07

How to place a minlength on an input of type=text?

1 Answers1