Different title when input invalid and input empty

Question

I have an input:

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

If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?

Maybe it's because you also specified that input as `required`? — PJProudhon, Nov 05 '17 at 10:26

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I think that your problem is similar to the one in this link.

The correct answer there says that:

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('')" />

Here is a working example for your case to see:

<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

1 Answers1