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>

CodePudding user response：

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>

CodePudding user response：

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>