Question

我有一个输入：

<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>

如果输入数字，则会出现标题。但如果我不输入任何内容，它将给出相同的错误标题。当我输入任何东西时，不仅输入字母时标题的标题有何不同？

Answer 1

我认为您的问题类似于link中的问题。

那里的正确答案是：

如果使用setCustomValidity（）设置值，则该字段无效。即设置非零长度字符串会导致浏览器认为该字段无效。为了允许任何其他验证的效果，您必须清除自定义有效性：
  <input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />

以下是您的案例的工作示例：

<form>
  <input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
  <button type="submit">Submit</button>
</form>

输入无效且输入为空时标题不同

1 个答案: