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

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>

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

Different title when input invalid and input empty

html

javascript

regex

html5-validation

jsvalidation