Question

我正在尝试验证输入字段。当我尝试提交但未填写任何内容时，它给了我我所犯的错误：请从以下内容开始您的问题：我愿意。因此，我尝试检查用户在该字段中键入的文本是否以以下内容开头：我愿意。

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

{
  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')吗？

Answer 2

问题是您如何处理验证，关键在于这一行if (!$form.checkValidity()) {，这将不会检查您的字符串是否以Will i ever开头，您必须在if，if之前手动进行操作有一个替代解决方案：

{
 const handleSubmitForm = e => {
  
  const $form = e.currentTarget;
  const field = $form.querySelector('.question_field');
  //here we validate the form manually
  const message = showValidationInfo(field);
  //if a message is found we show the error on the DOM, if is undefined we have no errors and we can submit the form
  if (message) {
    e.preventDefault();

  $form.querySelector('.error').innerHTML = message;
  $form.querySelector('.error').style.color = "red";
} else {
  console.log('Form is valid => submit form');
}
 };

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

  return undefined;
};

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>

Answer 3

您尚未评论occured`上的反引号；

输入字段验证存在问题

3 个答案: