Как создать форму HTML, которая принимает только выбранные почтовые индексы

Question

Я хотел бы создать валидатор почтового индекса для веб-сайта службы доставки.(Почти как поле промокода, где будет работать только правильный код.)

Это HTML-форма на стороне клиента, где пользователь может ввести свой почтовый индекс и проверить, доступна ли доставка в его области.Там будет 5 выбранных почтовых индексов, где доступна доставка.

Это то, что я пробовал до сих пор с одним почтовым индексом, но он не показывает никаких сообщений об ошибках.

<form>
<div class="form-group">
<input class="form-control" required
              data-msg="Sorry we do not deliver to you yet."
              data-label="Zipcode"
              type="number" name="zipcode" 
              placeholder="Enter your zipcode or address" 
              pattern="11111" required
               />
</input>
</div>
<div class="btn-wrapper mt-6">
<input type="submit" value="Submit">
</div>
</form>

-Если пользователь вводит и отправляет правильный почтовый индекс, он должен перенести их на страницу заказа.

-Если почтовый индекс не является одним из выбранных почтовых индексов, под формой должно появиться сообщение об ошибке: «Извините, мы не доставляем вам. Подпишитесь здесь, чтобы получать уведомления, когда доставка будет доступна для вас».(Это сообщение об ошибке потребует JavaScript)

-Выберите почтовые индексы (на данный момент будет работать любое число).например: 11111, 22222, 33333, 44444, 55555

Answer 1

в настоящее время шаблон ввода не поддерживается для типа number, но доступен для text, search, url, tel, email и password

<p>validate any 5 digit</p>
<form>
  <input pattern="[0-9]{5}" required />
  <input type="submit" value="Submit">
</form>

<p>validate only 11111, 22222, 33333, 44444, 55555</p>
<form>
  <!-- or: 1{5}|2{5}|3{5}|4{5}|5{5} -->
  <input pattern="11111|22222|33333|44444|55555" required />
  <input type="submit" value="Submit">
</form>