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

Question

, когда я не установил размер продукта, на нем будет отображаться текст «Необходимо выбрать 1 размер для продукта». Но это не может показать текст. Я хочу знать, как использовать выбор и ввод элемента?

<select name="product_size" class="form-control" required oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')">
    <option disabled selected>Select a Size</option>
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
</select>

введите описание изображения здесь

Answer 1

Добро пожаловать в StackOverflow!

В вашем коде две ошибки:

1. Обратный вызов oninvalid никогда не мог быть выполнен, как никогда проверено на достоверность элемента select. Это можно исправить, обернув его в элемент form и добавив в него <button>. Когда пользователь нажимает эту кнопку, браузер проверяет форму, видит, что выбор недействителен, и вызывает ваш oninvalid код.

2. Он никогда не будет недействительным в chrome. Я проверил ваш код, и он отлично работал на Firefox после упаковки формы. Chrome однако не думает, что ваш вариант по умолчанию - invalid, чтобы заставить его думать, что я добавил атрибут value="".

Рабочий пример:

<form action="javascript:void()">

  <select 
    required 
    name="product_size"
    class="form-control"
    oninput="setCustomValidity('')"
    oninvalid="setCustomValidity('Must pick 1 size for the product')"
  >
      <option value="" disabled selected>Select a Size</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
  </select>

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