输入无效和输入为空时的不同标题

Question

我有一个输入：

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

如果我输入一个数字，标题就会出现。 但是如果我什么都不输入，它会给出相同的错误标题。 当我不输入任何内容时，当我不仅输入字母时，标题怎么会不同？

Answer 1

我认为您的问题与此链接中的问题类似。

那里的正确答案是：

如果您使用 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>