HTML input pattern attribute

Question

I'm want to take an input from user that is of the form "Z1C19999". So how i do set the pattern attribute.

I have tried using the following code.

<input type="text" name="farmercode" class="text" pattern="Z[1-3]+C[1-5]+[0-9]{5,8}" title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format "Z1C19999" ">

The input must have the syntax Z[Any value between 1 to 3]C[Any value between 1 to 5][Any value between 0 to 9999]. The minimum length is 5 and max 8.

In my case even if I give 123456 only as input it is still accepting the value which is wrong. I want it to start with Z.

Answer 1

Your pattern works great in Chrome where I tested: see this CodePen

 input[pattern] ~ span { display: none; } input[pattern]:valid ~ span.valid { display: inline-block; } input[pattern]:invalid ~ span.invalid { display: inline-block; }

 <form> <input type="text" name="farmercode" class="text" pattern="Z[1-3]+C[1-5]+[0-9]{5,8}" title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format Z1C19999"> <span class="valid">Valid</span> <span class="invalid">Invalid</span> </form>

However, I think the RegExp that best describes your sentence is as follow

The input must have the syntax Z[Any value between 1 to 3]C[Any value between 1 to 5][Any value between 0 to 9999]. The minimum length is 5 and max 8.

Z[1-3]C[1-5][0-9]{5,8}

Which leads me to the conclusion: What makes you think it doesn't work?

TIP: Add the required attribute to force something inside.