输入字段验证有问题

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);

};

Answer 1

问题是您如何处理验证，关键在这一行，if (!$form.checkValidity()) {这不会检查您的字符串是否以Will i ever您必须在 if 之前手动执行，这里您有一个替代解决方案：{&nbsp;const handleSubmitForm = e => {&nbsp;&nbsp;&nbsp; const $form = e.currentTarget;&nbsp; const field = $form.querySelector('.question_field');&nbsp; //here we validate the form manually&nbsp; const message = showValidationInfo(field);&nbsp; //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&nbsp; if (message) {&nbsp; &nbsp; e.preventDefault();&nbsp; $form.querySelector('.error').innerHTML = message;&nbsp; $form.querySelector('.error').style.color = "red";} else {&nbsp; console.log('Form is valid => submit form');}&nbsp;};const showValidationInfo = field => {&nbsp; if (field.validity.valueMissing) {&nbsp; &nbsp; return 'Please fill in a question starting with: Will i ever';&nbsp; }&nbsp; if (field.validity.typeMismatch) {&nbsp; &nbsp; return 'Type not right';&nbsp; }&nbsp; if (field.validity.rangeOverflow) {&nbsp; &nbsp; const max = field.getAttribute('max');&nbsp; &nbsp; return 'Too big, max ${max}';&nbsp; }&nbsp; if (field.validity.rangeUnderflow) {&nbsp; &nbsp; const min = field.getAttribute('min');&nbsp; &nbsp; return 'Too small, min ${min}';&nbsp; }&nbsp; if (field.validity.tooShort) {&nbsp; &nbsp; const min = field.getAttribute('minlength');&nbsp; &nbsp; return 'Too short, minimum length is ${min}';&nbsp; }&nbsp; if (field.validity.tooLong) {&nbsp; &nbsp; const max = field.getAttribute('maxlength');&nbsp; &nbsp; return 'Too long, maximum length is ${max}';&nbsp; }&nbsp; if (!field.value.toLowerCase().startsWith("will i ever")) {&nbsp; &nbsp; return 'Start your question with: Will i ever';&nbsp; }&nbsp; return undefined;};const handeInputField = e => {const $field = e.currentTarget;if ($field.checkValidity()) {&nbsp; $field.parentElement.querySelector('.error').textContent = '';&nbsp; if ($field.form.checkValidity()) {&nbsp; &nbsp; $field.form.querySelector('.error').innerHTML = '';&nbsp; }}};const handeBlurField = e => {const $field = e.currentTarget;showValidationInfo($field);};const addValidationListeners = fields => {fields.forEach($field => {&nbsp; $field.addEventListener('input', handeInputField);&nbsp; $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">&nbsp; &nbsp; &nbsp; &nbsp; <form autocomplete="off" class="form_question" action="answer.html">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="name question" for="name">Ask me a question</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="question_wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="error">Start your question with: Will i ever...</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="field question_field" type="text" name="question" placeholder="Will i ever..." value="" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="button" class="answr-btn btn-question" type="submit" value="answer it!">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input autocomplete="false" name="hidden" type="text" style="display:none;">&nbsp; &nbsp; &nbsp; &nbsp; </form>

Answer 2

这条线没有意义：const&nbsp;fields&nbsp;=&nbsp;$form.querySelectorAll('.input');class="input"您的表单中没有 HTML 元素。你的意思是$form.querySelectorAll('input')？

Answer 3

您在occured&nbsp;`;处取消了反引号的注释。