HTML Pattern for phone numbers - html

Question

This is my first time writing a pattern for HTML phone numbers. I am based in Singapore. In my country phone numbers starts with 8 or 9 and has 9 digits.
This is my html pattern.
Can someone take look and let me know what went wrong?
I don't see any resources out there for including certain numbers only.
pattern: ([8|9]{1}[0-9]{8})
below is my full code
<h3>Sign Up</h3>
<label htmlFor="username" className="sr-only">Username: </label>
<input type="text"
name="username"
minLength= '5'
maxLength= '10'
onChange={onChange}
className="form-control"
placeholder="Enter Username" required />
<label htmlFor="password" className="sr-only">Password: </label>
<input type="password"
name="password"
minLength= '8'
pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title = "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
onChange={onChange}
className="form-control"
placeholder="Enter Password" />
<label htmlFor="email" className="sr-only">Email: </label>
<input type="text"
name="email"
onChange={onChange}
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$"
className="form-control"
placeholder="Email" required />
<label htmlFor="mobile" className="sr-only">Mobile Number: </label>
<input type="number"
name="mobile"
onChange={onChange}
className="form-control"
pattern="[8-9]{1}[0-9]{8}"
placeholder="Mobile Number" />
<button className="btn btn-lg btn-primary btn-block"
type="submit">Sign Up</button>

Answer 1

The answer is that pattern is not a valid attribute on input when type=number. Also the pipe character inside []'s doesn't mean "or". Either change the input type to another value, or use min/max.
<input type="text" inputmode="numeric"
name="mobile"
onChange={onChange}
className="form-control"
pattern="[89][0-9]{8}"
placeholder="Mobile Number" />
or
<input type="number"
name="mobile"
onChange={onChange}
className="form-control"
min=800000000
max=999999999
step=1
placeholder="Mobile Number" />

Answer 2

Phone number starting with 8-9 and remaing 9 digit with 0-9" required
<input type="text" class="form-control" readonly="readonly" value="" name="enquiry_mobile" placeholder="Enter mobile number *" pattern="[8-9]{1}[0-9]{8}">

Answer 3

If you expect that using pattern on input will prevent you from entering incorrect data base on that pattern, you're wrong.
You have to submit the form for the browser to validate. The first form bellow will submit, the second one will not.
<form>
<input value="891234567" type="tel" id="phone" name="phone" pattern="([89][0-9]{8})" />
<button>Submit</button>
</form>
<form>
<input value="121234567" type="tel" id="phone" name="phone" pattern="([89][0-9]{8})" />
<button>Submit</button>
</form>
Edit:
As #Robert McKee pointed in the comment below, the first pattern used on this answer is incorrect. Updated pattern to ([89][0-9]{8}).