时间戳

首页 > 解决方案 > HTML 输入模式验证

html - HTML 输入模式验证

问题描述

<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 输入验证中，我只设置了 alphebetic 的模式。在其中使用数字输入进行测试时，它显示

但是，如果我将输入更正为字母，它将再次显示无效 在此处输入图像描述

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

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

标签： htmlvalidation

解决方案

你没有清除你的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>

推荐阅读