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

Question

我有一个输入:

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

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

Answer 1

我认为您的问题与此 link 中的问题类似.

那里的正确答案是:

If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:

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