为什么表单是有效的？

Question

为什么表单是有效的？

3

如果表单验证通过，为什么按钮颜色不会改变？如果您打开表单并发送空表单，则出于某种原因它将被视为已验证，但是如果您输入数据，然后将其删除，则会出现验证错误，并且按钮将无法发送数据（应该可以）。

https://jsfiddle.net/qwertyzaqqq/vedhqLsu/12/

const showInputError = (formElement, inputElement, errorMessage, settings) => {
  const errorElement = formElement.querySelector(`#${inputElement.name}-error`);
  inputElement.classList.add(settings.inputErrorClass);
  errorElement.classList.add(settings.errorClass);
  errorElement.textContent = errorMessage;
}

const hideInputError = (formElement, inputElement, settings) => {
  const errorElement = formElement.querySelector(`#${inputElement.name}-error`);
  inputElement.classList.remove(settings.inputErrorClass);
  errorElement.classList.remove(settings.errorClass);
  errorElement.reset();
}

const hasInvalidInput = (inputList) => {
  return inputList.some((inputElement) => {
    return !inputElement.validity.valid;
  });
}

const toggleButtonState = (inputList, buttonElement, settings) => {
  if (hasInvalidInput(inputList)) {
    buttonElement.classList.add(settings.inactiveButtonClass);
    buttonElement.disabled = true;
  } else {
    buttonElement.classList.remove(settings.inactiveButtonClass);
    buttonElement.disabled = false;
  }
}

const checkInputValidity = (formElement, inputElement, settings) => {
  if (inputElement.validity.valid) {
    hideInputError(formElement, inputElement, settings);
  } else {
    showInputError(formElement, inputElement, inputElement.validationMessage, settings);
  }
}

const setEventListeners = (formElement, settings) => {
  const inputList = Array.from(formElement.querySelectorAll(settings.inputSelector));
  const submitButton = formElement.querySelector(settings.submitButtonSelector);
  inputList.forEach((inputElement) => {
    inputElement.addEventListener('input', (evt) => {
      checkInputValidity(formElement, inputElement, settings);
      toggleButtonState(inputList, submitButton, settings);
    });
  });
}

const enableValidation = (settings) => {
  const formList = Array.from(document.querySelectorAll(settings.formSelector));
  formList.forEach((formElement) => {
    setEventListeners(formElement, settings);
  });
}

enableValidation({
  formSelector: '.popup__form',
  inputSelector: '.popup__input',
  submitButtonSelector: '.popup__button',
  inactiveButtonClass: 'popup__save-button_disabled',
  inputErrorClass: 'popup__input_type_error',
  errorClass: 'popup__input-error-message_visible'
});

- Иван иванов

欢迎来到 Stack Overflow。请查看如何提出好问题？并编辑您的问题，包括所有需要在一个最小化、可重现的示例中重新创建此错误所需的相关代码，这样我们就可以看到问题并获得我们需要的信息以帮助您解决它。 - FluffyKitten

这是设计上的考虑，也是浏览器的默认行为。 - TimTIM Wong

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Igor Pokrovskiy · Answer 1

0

尝试替换这个：

errorElement.reset();

- Igor Pokrovskiy

您的回答可以通过添加额外的支持信息来改进。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认您的答案是否正确。您可以在帮助中心中找到有关撰写好答案的更多信息。 - Community

- Maxwell Archer · Answer 2

验证未由事件触发

您可以添加focusout监听器，在用户切换到另一个输入时显示验证消息。并/或者添加keyup事件，然后检查evt.keycode === 13和/或9，如果为真，则用户按下enter/tab键。

 inputElement.addEventListener('input keyup focusout', (evt) => { <== Add listeners (keyup and focusout)
      checkInputValidity(formElement, inputElement, settings);
      toggleButtonState(inputList, submitButton, settings);
    });

检查输入/点击键的代码大致如下。

   inputElement.addEventListener('input keyup focusout', (evt) => {
   if(evt.keycode === 13 || evt.keycode === 9){ // The Enter and Tab keyup check
          checkInputValidity(formElement, inputElement, settings);
          toggleButtonState(inputList, submitButton, settings);
          }
 });