Другой заголовок при вводе недопустимого и пустом вводе

У меня есть ввод:

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

Если я введу число, появится название. Но если я ничего не введу, появится тот же заголовок ошибки. Как может заголовок, когда я ввожу не только буквы, может отличаться, когда я ничего не ввожу?


javascript html regex jsvalidation html5-validation
person Bariq Dharmawan    schedule 05.11.2017    source источник
comment
Ответы должны отвечать не только на ваш вопрос, но и от всех, у кого такая же проблема. Так что английский, пожалуйста;)   -  person Jonas Wilms    schedule 05.11.2017
comment
Можете подробнее прояснить вашу проблему?   -  person Ammar Alyousfi    schedule 05.11.2017
comment
Может быть, это потому, что вы также указали этот ввод как required?   -  person PJProudhon    schedule 05.11.2017
comment
@JonasW. Окей, братан, спасибо за совет :)   -  person Bariq Dharmawan    schedule 05.11.2017
comment
Кстати, извините за плохой английский :(. Мне 16 лет :)   -  person Bariq Dharmawan    schedule 06.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что ваша проблема похожа на проблему в этом ссылка.

Правильный ответ там говорит, что:

Если вы установите значение с помощью 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>

person Ammar Alyousfi    schedule 05.11.2017