0

Валидацию делаю впервые, поэтому прошу сильно не критиковать, от помощи и откорректированному коду буду рада:). При необходимости могу показать часть html разметки форм, чтобы было понятней. В консоле множество ошибок, которые я не могу понять как и что исправлять:(

const showInputError = (config, formElement, inputElement) => {
  const errorElement = formElement.querySelector(`#${inputElement.id}-error`);
  inputElement.classList.add(config, inputErrorClass);
  errorElement.textContent = '';
}

const hideInputError = (config, formElement, inputElement) => {
  const errorElement = formElement.querySelector(`#${inputElement.id}-error`);
  inputElement.classList.remove(config, inputErrorClass);
  errorElement.textContent = '';
}

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

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

const toggleButtonState = (config, inputList, ButtonElement) => {
  if (hasInvalidInput(inputList)) {
    ButtonElement.classList.add(config, inactiveButtonClass);
    ButtonElement.setAttribute('disabled', true);
  } else {
    ButtonElement.classList.remove(config, inactiveButtonClass);
    ButtonElement.removeAttribute('disabled');
  }
}

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

const enableValidation = ({
  formSelector,
  inputSelector
}) => {
  const formList = Array.from(document.querySelectorAll(formSelector));
  formList.forEach((formElement) => {
    formElement.addEventListener('submit', function(evt) {
      evt.preventDefault();
    });
    setEventListeners(inputSelector, formElement);
  });
}

enableValidation({
  formSelector: '.form',
  inputSelector: '.form__item',
  submitButtonSelector: '.form__button',
  inactiveButtonClass: 'form__button_disabled',
  inputErrorClass: 'form__item_invalid',
  errorClass: 'popup__error_visible'
});
.form__button_disabled {
  background-color: white;
  color: black;
  border: 1px solid black;
  opacity: 0.2;
}

.form__button_disabled:hover {
  opacity: 0.2;
  cursor: default;
}

.form__item-error {
  min-height: 12px;
  font-family: 'Inter', 'Arial', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: #FF0000;
}
<div class="popup" id="popup-profile">
  <div class="popup__container">
    <button class="popup__close-button" id="close-button" type="button" value="close"></button>
    <form class="form" id="form" name="form" method="post">
      <h2 class="form__title">Редактировать профиль</h2>
      <fieldset class="form__user" id="profile__fields">

        <input class="form__item" type="text" id="profile__name" name="profile__name" placeholder="Введите ваше имя" autocomplete="off" value="Жак-Ив Кусто" minlength="2" maxlength="40" required>
        <span class="form__item-error" id="profile__name-input-error"></span>

        <input class="form__item" type="text" id="profile__paragraph" name="profile__paragraph" placeholder="Ваша профессия" minlength="2" maxlength="200" autocomplete="off" value="Исследователь океана" required>
        <span class="form__item-error" id="profile__paragraph-input-error"></span>

      </fieldset>
      <button class="form__button" type="submit" name="profile__save" value="Сохранить">Сохранить</button>
    </form>
  </div>
</div>
<!-- попап ELements-photo -->
<div class="popup popup-photo">
  <div class="popup__container">
    <button class="popup__close-button" id="close-Btn" type="button" value="close"></button>
    <form class="form" id="button-form" name="form" method="post">
      <h2 class="form__title">Новое место</h2>
      <fieldset class="form__user">

        <input class="form__item" type="text" id="elements__name" name="elements__name" placeholder="Название" minlength="1" maxlength="30" required>
        <span class="form__item-error" id="elements__name-input-error"></span>

        <input class="form__item" type="url" id="elements__image" name="elements__image" placeholder="Ссылка на картинку" required>

        <span class="form__item-error" id="elements-image-error"></span>

      </fieldset>
      <button class="form__button" type="submit" name="profile__save" value="Сохранить">Сохранить</button>
    </form>
  </div>
</div>

4
  • Как минимум у вас опечатка в названии переменной chowInputError =. 13 июн 2022 в 10:44
  • опечатку исправила:) showInputError 13 июн 2022 в 11:03
  • добавьте html css 13 июн 2022 в 11:24
  • html добавила, только css несколько добавила, т.к. все разбито по БЭМ. 13 июн 2022 в 11:34

2 ответа 2

0

Надеюсь это решит вашу задачу. У вас было много пропущенных ошибок. Проверте и вы всё сами поймёте!

const showInputError = (config, formElement, inputElement, inputErrorClass) => {
  const errorElement = formElement.querySelector(`#${inputElement.id}-input-error`);
  inputElement.classList.add(config, inputErrorClass);
  errorElement.textContent = "";
};

const hideInputError = (config, formElement, inputElement, inputErrorClass) => {
  const errorElement = formElement.querySelector(`#${inputElement.id}-input-error`);
  inputElement.classList.remove(config, inputErrorClass);
  errorElement.textContent = "";
};

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

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

const toggleButtonState = (config, inputList, ButtonElement) => {
  if (hasInvalidInput(inputList)) {
    ButtonElement.classList.add(config, "inactiveButtonClass");
    ButtonElement.setAttribute("disabled", true);
  } else {
    ButtonElement.classList.remove(config, "inactiveButtonClass");
    ButtonElement.removeAttribute("disabled");
  }
};

function setEventListeners(
  inputSelector,
  formElement,
  submitButtonSelector,
  config,
  inputErrorClass
) {
  const inputList = Array.from(formElement.querySelectorAll(inputSelector));
  const ButtonElement = formElement.querySelector(submitButtonSelector);
  toggleButtonState(config, inputList, ButtonElement);
  inputList.forEach((inputElement) => {
    inputElement.addEventListener("input", () => {
      
      checkInputValidity(config, formElement, inputElement, inputErrorClass);
      toggleButtonState(config, inputList, ButtonElement);
    });
  });
}

const enableValidation = (params) => {
  const formList = Array.from(document.querySelectorAll(params.formSelector));
  formList.forEach((formElement) => {
    formElement.addEventListener("submit", function (evt) {
      evt.preventDefault();
    });

    setEventListeners(
      params.inputSelector,
      formElement,
      params.submitButtonSelector,
      params.config,
      params.inputErrorClass
    );
  });
};

enableValidation({
  formSelector: ".form",
  inputSelector: ".form__item",
  submitButtonSelector: ".form__button",
  inactiveButtonClass: "form__button_disabled",
  inputErrorClass: "form__item_invalid",
  errorClass: "popup__error_visible",
  config: "somthing"
});
.form__button_disabled {
    background-color: white;
    color: black;
    border: 1px solid black;
    opacity: 0.2;
  }
  .form__button_disabled:hover {
    opacity: 0.2;
    cursor: default;
  }
.form__item-error {
    min-height: 12px;
    font-family: 'Inter', 'Arial', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    color: #FF0000;
}
<div class="popup" id="popup-profile">
  <div class="popup__container">
    
    <button class="popup__close-button" id="close-button">
      Close
    </button>
    
    <form class="form"
          id="form"
          name="form"
          method="post">
      
      <h2 class="form__title">
        Редактировать профиль
      </h2>
      
      <fieldset class="form__user" id="profile__fields">

        <input class="form__item"
               type="text"
               id="profile__name"
               name="profile__name"
               placeholder="Введите ваше имя"
               autocomplete="off"
               value="Жак-Ив Кусто"
               minlength="2"
               maxlength="40"
               required>
        
        <span class="form__item-error" id="profile__name-input-error"></span>

        <input class="form__item"
               type="text"
               id="profile__paragraph"
               name="profile__paragraph"
               placeholder="Ваша профессия"
               minlength="2"
               maxlength="200"
               autocomplete="off"
               value="Исследователь океана"
               required>
        
        <span class="form__item-error" id="profile__paragraph-input-error"></span>

      </fieldset>
      
      <button class="form__button"
              type="submit"
              name="profile__save"
              value="Сохранить">
        Сохранить
      </button>
      
    </form>
  </div>
</div>

<!-- попап ELements-photo -->
<div class="popup popup-photo">
  <div class="popup__container">
    <button class="popup__close-button"
            id="close-Btn"
            type="button"
            value="close">
      Close
    </button>
    
    <form class="form"
          id="button-form"
          name="form"
          method="post">
      
      <h2 class="form__title">Новое место</h2>
      <fieldset class="form__user">

        <input class="form__item"
               type="text"
               id="elements__name"
               name="elements__name"
               placeholder="Название"
               minlength="1"
               maxlength="30"
               required>
        
        <span class="form__item-error" id="elements__name-input-error"></span>

        <input class="form__item"
               type="url"
               id="elements__image"
               name="elements__image"
               placeholder="Ссылка на картинку"
               required>

        <span class="form__item-error" id="elements-image-error"></span>

      </fieldset>
      <button class="form__button"
              type="submit"
              name="profile__save"
              value="Сохранить">
        Сохранить
      </button>
    </form>
  </div>
</div>

0

Меня зовут Иван. Я недавно начал изучать js, и сталкнулся с этой же задачей на Практикуме. Помогите пожалуйста разобраться на примере вашего кода. Подскажите, в предложенном вами решении не совсем понятно, от куда берется config. Если бы в начале кода было бы что то вроде:

const config = {

formSelector: ".form", inputSelector: ".form__item", submitButtonSelector: ".form__button", inactiveButtonClass: "form__button_disabled", inputErrorClass: "form__item_invalid", errorClass: "popup__error_visible" }

Мне бы было понятно. Подскажите это пропущен кусочек когда, или я не правильно понимаю логику?

1
  • Это не ответ, а комментарий. 4 июл 2022 в 9:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.