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输入验证中，我仅设置了字母拼写的模式。使用数字输入进行测试时，显示

但是，如果我更正了字母输入，它将再次显示无效

我必须再次刷新页面以输入正确的格式，只是它不会显示 无效。这正常吗？ 这是我的代码：

<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>