проблема с опцией шаблона ввода html-формы

#html #css

Вопрос:

Здравствуйте, у меня возникли проблемы с шаблоном формы ввода html, который допускает только алфавит. Вот код:

 <form name="lineform" id="line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
  <div>
    <p class="labels required">Channel Name:</p>
    <p class="labels"><input pattern="[A-Za-z] " oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" id="chname" name="chname" value="" placeholder="Enter your Channel Name" style="width: 700px;" required></p>
  </div><br>
  <div>
    <p class="labels required">Channel Id:</p>
    <p class="labels "><input type="text" id="chid" name="chid" value="" placeholder="Enter your Channel ID" style="width: 700px;" required></p>
  </div><br>
  <div>
    <p class="labels required">Channel Access Tokenn:</p>
    <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 700px;" required></p>
  </div><br>



  <div>
    <button style="background-color:#1f73b7; color:white; width:8%; height: 35px; border: none; border-radius: 3px;" type="submit">Submit</button>
  </div><br>

</form>

Код работает нормально, если я введу номер и отправлю его, он не будет работать и показывать предупреждение, но я попытался удалить номер и ввести букву, в которой по-прежнему отображается то же сообщение об ошибках, что мне нужно указать только алфавиты. Есть какие-нибудь идеи, как я могу это исправить?

1. попробуйте установить атрибут onInvalid для функции javascript, которая принимает событие в качестве параметра. проверьте шаблон внутри этой функции и верните значение true или false в зависимости от значения event.target.

Ответ №1:

Проблема, по-видимому, заключается в том, что вы не очищаете setCustomValidity сообщение и не сообщаете о действительности, когда ввод становится действительным.

Смотрите пример здесь: setCustomValidity

  else
   {
     input.setCustomValidity('');
     input.reportValidity();
   }

Очень важно установить сообщение в пустую строку, если в нем нет ошибок. До тех пор, пока сообщение об ошибке не будет пустым, форма не пройдет проверку и не будет отправлена.

Обновленный пример:

 document.getElementById("chname").addEventListener('invalid', function() {
  const validityState_object = this.validity;

  if (validityState_object.patternMismatch) {
    this.setCustomValidity('Please enter on alphabets only. ');
    this.reportValidity();
  } else {
    this.setCustomValidity('');
    this.reportValidity();
  }
});

 button {
  background-color: #1f73b7;
  color: white;
  width: 8%;
  height: 35px;
  border: none;
  border-radius: 3px;
}

input {
  width: 700px;
}

 <form name="lineform" id="line-form" action="main.html" method="POST">
  <div>
    <p class="labels required">Channel Name:</p>
    <p class="labels"><input pattern="[A-Za-z] " type="text" id="chname" name="chname" value="" placeholder="Enter your Channel Name" required></p>
  </div><br>
  <div>
    <p class="labels required">Channel Id:</p>
    <p class="labels "><input type="text" id="chid" name="chid" value="" placeholder="Enter your Channel ID" required></p>
  </div><br>
  <div>
    <p class="labels required">Channel Access Tokenn:</p>
    <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" required></p>
  </div><br>

  <div>
    <button type="submit">Submit</button>
  </div><br>
</form>