Блог

Вот над чем я работаю. Я следовал этому запросу проверки встроенной формы MDN HTML5. Единственным критерием для моей формы является то, что необходимо ответить на все 3 вопроса. Я нахожусь в точке, когда пользователь нажимает кнопку отправки, все вопросы, на которые не были даны ответы, выделяются и появляется небольшое всплывающее окно. Я не писал для этого никакого Javascript, просто немного CSS, который был в руководстве:

 <style>
        input:invalid,
        select:invalid {
            border: 2px solid red;
        }

        input:valid,
        select:valid {
            border: 2px solid black;
        }

        input:invalid:required,
        select:invalid:required {
            border: 1px dashed orange
        }
    </style>
 

Моя кнопка отправки имеет onclick="submitHandler()" , и все, что делает эта функция, — это console.log() значения пользовательских вводимых данных:

   <script>
    function submitHandler(){
      const inp = document.getElementById('age').value
      const dropdowns = document.getElementsByTagName('select')
      console.log(inp, dropdowns[0].value, dropdowns[1].value)
      console.log("Submit button clicked.")
    }
  </script>
 

Проблема в том, что код внутри submitHandler() выполняется при каждом нажатии кнопки отправки, однако я хочу, чтобы это происходило только тогда, когда форма действительна.

Если есть встроенная проверка формы, я надеюсь, что есть встроенный флаг, такой как formIsInvalid или аналогичный, который я могу использовать в моем submitHandler(). Есть ли такая вещь? (Я пытаюсь использовать встроенные / ванильные функции, потому что моя форма проста.)

Спасибо!

Попробуйте это

Используйте событие отправки вместо события щелчка

Если у вас есть проверка (выбор ДОЛЖЕН иметь пустой параметр и должен быть проверен), вы не увидите консоль.регистрируется до тех пор, пока форма не станет действительной

 document.getElementById("formID").addEventListener("submit", function(e) {
  e.preventDefault(); // so you can see the values
  const inp = document.getElementById('age').value;
  const dropdowns = [...document.querySelectorAll('select')].map(sel => sel.value)
  console.log(inp, dropdowns);
  console.log("Submit button clicked.");

}); 

 <form id="formID">
  <input type="number" id="age" required />

  <select required>
    <option value="">Please select</option>
    <option value="1">One</option>
  </select>

  <select required>
    <option value="">Please select</option>
    <option value="2">Two</option>
  </select>
  <input type="submit" />
</form>