时间戳

首页 > 解决方案 > 为什么表格有效？

javascript - 为什么表格有效？

问题描述

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

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

https://codepen.io/camobap6/pen/BaKBGJY

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

标签： javascripthtmlcss

解决方案

验证不是由事件触发

您可以添加 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);
          }
 });

推荐阅读