CODEWITHSUNDEEP
javascripthtmlreactjsinputtextinput
Emi
Emi

Reputation: 21

How to allow only 2 digit numbers in html text input separated by colon?

How to allow only 2 digit numbers in html text input separated by colon?

Desired output 33:33

I tried this

<form name="form1"> 
 <input type="text"  name="pincode" maxlength="4"  id="pin" pattern="\d{4}" required/>
 <input type="Submit"/> 
</form>

Upvotes: 2

Views: 1706

Answers (2)

Irfanullah Jan
Irfanullah Jan

Reputation: 3892

You can use regexp ^\d{2}:\d{2}$ which matches only strings of the form dd:dd, d representing a single digit.

input[name="pincode"]:invalid {
  background-color: red;
}

input[name="pincode"]:valid {
  background-color: green;
}
<form name="form1"> 
 <input type="text"  name="pincode" minlength="5" maxlength="5"  id="pin" pattern="^\d{2}:\d{2}$" required>
 <input type="Submit"> 
</form>

Upvotes: 1

Declan McKelvey-Hembree
Declan McKelvey-Hembree

Reputation: 1180

Your regex is wrong. try this:

<form name="form1"> 
 <input type="text"  name="pincode" maxlength="5" id="pin" pattern="\d{2}:\d{2}" required/>
 <input type="Submit"/> 
</form>

Upvotes: 2

Related Questions