javascript - 输入字段验证存在问题

Question

我正在尝试验证输入字段。当我尝试提交而不填写某些内容时，它给了我我犯的错误:请以以下方式开始你的问题:我会吗？所以我试图检查用户在字段中输入的文本是否以:will iever 开头。

但是，当我输入一个(或多个)随机字符时，它只是提交表单。我希望它检查输入是否以那些固定的树单词开头，否则不提交。

{
  const handleSubmitForm = e => {
  const $form = e.currentTarget;
  if (!$form.checkValidity()) {
    e.preventDefault();

    const field = $form.querySelector('.question_field');
    showValidationInfo(field);

    //$form.querySelector('.error').innerHTML = 'Some errors occured';
  } else {
    console.log('Form is valid => submit form');
  }
};

const showValidationInfo = field => {
  console.log(field);
  let message;
  if (field.validity.valueMissing) {
    message = 'Please fill in a question starting with: Will i ever';
  }
  if (field.validity.typeMismatch) {
    message = 'Type not right';
  }
  if (field.validity.rangeOverflow) {
    const max = field.getAttribute('max');
    message = 'Too big, max ${max}';
  }
  if (field.validity.rangeUnderflow) {
    const min = field.getAttribute('min');
    message = 'Too small, min ${min}';
  }
  if (field.validity.tooShort) {
    const min = field.getAttribute('minlength');
    message = 'Too short, minimum length is ${min}';
  }
  if (field.validity.tooLong) {
    const max = field.getAttribute('maxlength');
    message = 'Too long, maximum length is ${max}';
  }
  if (!field.value.toLowerCase().startsWith("will i ever")) {
    message = 'Start your question with: Will i ever';
  }
  if (message) {
    field.parentElement.querySelector('.error').textContent = 
   message;
    field.parentElement.querySelector('.error').style.color = "red";
  }
};

const handeInputField = e => {
  const $field = e.currentTarget;
  if ($field.checkValidity()) {
    $field.parentElement.querySelector('.error').textContent = '';
    if ($field.form.checkValidity()) {
      $field.form.querySelector('.error').innerHTML = '';
    }
  }
};

const handeBlurField = e => {
  const $field = e.currentTarget;
  showValidationInfo($field);
};

const addValidationListeners = fields => {
  fields.forEach($field => {
    $field.addEventListener('input', handeInputField);
    $field.addEventListener('blur', handeBlurField);
  });
};

const init = () => {
  const $form = document.querySelector('form');
  $form.noValidate = true;
  $form.addEventListener('submit', handleSubmitForm);

  const fields = $form.querySelectorAll('.input');
  addValidationListeners(fields);
};

init();
}

<div class="name_wrapper">
  <form autocomplete="off" class="form_question" action="answer.html">
    <label class="name question" for="name">Ask me a question</label>
    <div class="question_wrapper">
      <p class="error">Start your question with: Will i ever...</p>
      <input class="field question_field" type="text" name="question" placeholder="Will i ever..." value="" required>
    </div>
    <input id="button" class="answr-btn btn-question" type="submit" value="answer it!">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
  </form>
</div>

Answer 1

这一行没有意义:

const fields = $form.querySelectorAll('.input');

您的表单中没有带有 class="input" 的 HTML 元素。

您是指$form.querySelectorAll('input')吗？