HTML проверка шаблона ввода

Question

<form class="user" action="code_user.php" method="POST">
  <div class="form-group">
      <label>Enter Full Name</label>
      <input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
   </div>
    <button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>

</form> 

В HTML проверке входных данных я установил только шаблон букв c. При тестировании с вводом цифр c он показывает

Однако, если я исправлю ввод в алфавитах, он снова будет показывать недействительным

Я должен повторно sh обновить страницу, чтобы ввести правильный формат, только он не будет отображаться как недействительный. Это нормально? Это мой код:

<div class="form-group">
     <label>Enter Full Name</label>
     <input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>

Answer 1

Вы не очистите свой setCustomValidity(). Если вы установите значение с помощью setCustomValidity(), поле будет недействительным. Просто добавьте такой атрибут к вашему входному тегу:

oninput="setCustomValidity('')"

Исправлено в вашем коде:

<form class="user" action="code_user.php" method="POST">
    <div class="form-group">
        <label>Enter Full Name</label>
        <input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" oninput="setCustomValidity('')" type="text" name="name" autocomplete="off" required />
    </div>
    <button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>