Многократное сообщение об ошибке проверки при использовании шаблона, maxlength и required.Я хочу показать только одну пользовательскую ошибку, а не три разные ошибки

Question

Я работаю над загрузкой 4 и использую следующий код для замены сообщения об ошибке.

 <input type="text" pattern="[1-9]{1}[0-9]{3}" maxlength="4" class="form-control" placeholder="Enter User No." required oninvalid="this.setCustomValidity('Please enter valid User No.')" oninput="setCustomValidity('')">

Однако я получаю три ошибки.

1. 'Пожалуйста, введите действительный номер пользователя' при нажатии кнопки отправки.
2. 'Пожалуйста, укажите требуемый формат' и 'Пожалуйста, введите действительный номер пользователя. * вкл. очистка с использованием возврата.
3. «Пожалуйста, заполните поле» при очистке всего текста.

Что я хочу.

1. Ошибки, которые отображаются только при нажатии кнопки отправки. [Это работает правильно Теперь].
2. Не показывать никаких ошибок при использовании backspace для очистки содержимого или показывать одно сообщение об ошибке повсюду.

.jumbotron-m-color {
  border-radius: 0;
  background-color: #e8e4db;
  width: 100%;
  height: 80vh;
  background-image: linear-gradient(to top, #a6c1ee 0%, #fbc2eb 100%);
}

.form-container {
  position: absolute;
  top: 15vh;
  padding: 30px;
  border: 1px solid whitesmoke;
  border-radius: 0.25rem;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  background-color: #f4fdfd;
}

<div class="jumbotron-m-color container-fluid ">


  <div class="row justify-content-center">
    <div class="col-12 col-sm-6 col-md-3">
      <form id="Login-form" class="form-container">
        <div class="form-group">

          <label for="exampleInputEmail1">User No.</label>


          <input type="text" pattern="[1-9]{1}[0-9]{5}" maxlength="6" class="form-control" placeholder="Enter User No." required oninvalid="this.setCustomValidity('Please enter valid User No.')" oninput="setCustomValidity('')">

        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-group form-check">
          <span>
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1" style="font-size:small;">Remember me</label>
                    </span>
        </div>
        <button type="submit" class="btn btn-color btn-block">Submit</button>
      </form>
    </div>
  </div>