输入字段验证有问题

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 之前手动执行，这里您有一个替代解决方案：

{

 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 2

这条线没有意义：

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

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

你的意思是$form.querySelectorAll('input')？

Answer 3

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