Проверка формы HTML5 - настройка сообщений об ошибках

У меня есть форма с таким входом.

<input type="text" name="question" class="form-control" required="" minlength="4" maxlength="2" size="20" oninvalid="setCustomValidity('please enter something')">

Теперь сообщения проверки по умолчанию работают отлично. Но я хочу установить специальные сообщения для определенных правил.

т.е. для таких правил, как required minlength maxlengthпри каждом сбое, я хочу предоставить настраиваемое сообщение об ошибке, определенное для неудавшегося правила.

Я попытался, oninvalid="setCustomValidity('please enter something')"но это устанавливает это сообщение для каждого правила.

Как я могу указать пользовательские сообщения об ошибках для определенных правил?

javascript,html5,input,error-handling,

1

Ответов: 2


3 принят

Использовать setCustomValidityсвойство для изменения сообщений проверки и validityсвойств, чтобы найти тип ошибки проверки

validity: объект ValidityState, описывающий состояние действительности элемента.

validateСвойство load формы инициализируется для каждого элемента формы и обновляется при каждой проверке из-за пользовательских событий, таких как нажатие клавиши, изменение и т. Д. Здесь вы можете найти возможные значения

var email = document.getElementById("mail");

if (email.validity.valueMissing) {
  email.setCustomValidity("Don't be shy !");
}
else{
  event.target.setCustomValidity("");
}

email.addEventListener("input", function (event) {

  if (email.validity.valueMissing) {
    event.target.setCustomValidity("Don't be shy !");
  }
  else{
    event.target.setCustomValidity("");
  }
});  

Демо https://jsfiddle.net/91kc2c9a/2/

Примечание. По какой-то неизвестной причине проверка электронной почты не работает в вышеупомянутой скрипке, но должна работать нормально локально

Подробнее о ValidityState здесь


1

oninvalidСобытие происходит , когда вход является недопустимым, в вашем случае, вход oninvalid и если он пуст, maxlengthбудет происходить. (см. это )

И да, minlengthдолжно быть больше, required=""и вместо этого requiredвы можете просто написать, required если ваш код похож на это (с идентификатором «input-field»):

<input type="text" name="question" id="input-field" class="form-control" required="" minlength="4" maxlength="8" size="20" oninvalid="setCustomValidity('please enter something')">

Вам нужно будет добавить пользовательские функции для проверки различной проверки и отображения различных ошибок на их основе.

validator()Функция ниже срабатывает , когда поле ввода теряет фокус и проверяет на свои требования, и valdiator_two()срабатывают при каждом нажатии клавиши в поле ввода:

var field = document.getElementById("input-field");
function validator(){
    if (field.value === "") {
      alert("You can't leave this empty");
    }
    if (field.value !== "" && field.value.length < 4){
      alert("You have to enter at least 4 character");
    } 
}

function validator_two(){
    if (field.value.length >= 8){
      alert("You can't enter more than 8 character");
    }
}

field.addEventListener("blur", validator);
field.addEventListener("input", validator_two);
<input type="text" name="question" id="input-field" class="form-control" required="" minlength="4" maxlength="8" size="20" oninvalid="setCustomValidity('please enter something')">

JavaScript, html5, ввод, обработка ошибок,
Похожие вопросы