Perch Forms Phone Number format & errors

Hi... apologies if this has been asked before but my client wants to put some form error messages on their form field for phone number field, which does the following

1. Only allows a number to be entered into the phone number field
2. Only allow a UK number to be entered (10 digits)
3. throw up an error if the above two criteria aren't met

I've currently got the following implemented... it only pulls up an error though if the field is left blank. Is there a way to set an error for the pattern too? Currently any amount of text (numbers and letters can be entered and the form gives no errors)

<perch:input id="phone" type="tel" pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" class="field" placeholder="Phone No." required="true">
<perch:error for="phone" type="required"> <span class="error">Please complete the Telephone field</span></perch:error>
<perch:error for="phone" type="pattern"> <span class="error">Please format your telephone number correctly</span></perch:error>

I got the pattern from https://html5pattern.com/Phones