Блог

Главная - Вопросы по программированию - Как удалить ненужный элемент

Как удалить ненужный элемент

#javascript #validation

Вопрос:

Я пытаюсь написать простой код проверки, и у меня возникли проблемы. Я создал элемент div ‘._error-alert’ и не могу удалить его, если входные данные не пусты. Когда я нажимаю «Отправить», появляется мой элемент». _error-предупреждение», но он не исчезает, когда я пытаюсь что-то там ввести. Я буду очень благодарен, если вы поможете или, по крайней мере, покажете мне другой путь к ее решению

введите описание изображения здесь

 const form = document.querySelector('.validation__form'),
  reqItems = document.querySelectorAll('._req'),

  emailTest = /^(([^<>()[].,;:s@"] (.[^<>()[].,;:s@"] )*)|(". "))@(([^<>().,;s@"] .{0,1}) [^<>().,;:s@"]{2,})$/,
  onlyTextTest = /^[a-zA-Z0-9@] $/,
  onlyNums = /^[0-9] $/;

const inputTest = (example, input) => example.test(input.value);

const formAddError = (input) => {
  if (input.classList.contains('_req')) {
    const createBlock = document.createElement('div');
    createBlock.classList.add('_error-alert');
    input.parentElement.insertAdjacentElement("beforeend", createBlock);
    createBlock.innerText = `Invalid ${input.getAttribute("name")}!`;
  }

  input.parentElement.classList.add('_error');
  input.classList.add('_error');

};


const formRemoveError = (input) => {
  input.parentElement.classList.remove('_error');
  input.classList.remove('_error');
};

// validates form if function validateForm didn't have any errors and removes my created elements '._error-alert'
const sendValidatedForm = (e) => {
  e.preventDefault();

  let error = validateForm(form);
  if (error === 0) {
    console.log('fine');
    form.reset();
    document.querySelectorAll('._error-alert').forEach((errorAlert) => {
      errorAlert.remove();
    });
  }
};

form.addEventListener('submit', sendValidatedForm);

// there I want to check input and remove '._error-alert' if input isnt wrong
const checkInput = () => {
  reqItems.forEach((reqInput, index) => {
    reqInput.addEventListener('input', () => {
      formRemoveError(reqInput);

    });
  });
};
checkInput();

const validateForm = (form) => {
  let error = 0;

  reqItems.forEach(reqInput => {
    reqInput.value.trim();
    formRemoveError(reqInput);

    if (reqInput.getAttribute("name") == "email") {
      if (!inputTest(emailTest, reqInput)) {
        formAddError(reqInput);
        error  ;
      }
    } else if (reqInput.getAttribute("name") == "phone") {
      if (!inputTest(onlyNums, reqInput) amp;amp; reqInput.value.length < 8) {
        formAddError(reqInput);
        error  ;
      }
    } else if (reqInput.getAttribute("name") == "name") {
      if (!inputTest(onlyTextTest, reqInput)) {
        formAddError(reqInput);
        error  ;
      }
    }
  });

  console.log(error);
  return error;

}; 
 <form action="" class="validation__form">
  <div class="validation__input-list">
    <div class="validation__input-item">
      <input type="text" class="validation__input-input _req" name="name" placeholder="Name">
    </div>
    <div class="validation__input-item">
      <input type="text" class="validation__input-input" name="surname" placeholder="Surname">
    </div>
    <div class="validation__input-item">
      <input type="text" class="validation__input-input _req" name="phone" placeholder="Phone">
    </div>
    <div class="validation__input-item">
      <input type="text" class="validation__input-input _req" name="email" placeholder="Email">
    </div>
    <div class="validation__input-item">
      <input type="text" class="validation__input-input" name="password" placeholder="Password">
    </div>
  </div>
  <button class="validation__form-btn">Submit</button>
</form>

Ответ №1:

Установите visibility для свойства css элемента значение hidden .

 const error_element = document.getElementsByClassName('_error-alert')
error_element.style.visibility = 'hidden'

Комментарии:

1. Вы пытаетесь задать стиль для коллекции HTMLCollection, возвращаемой getElementsByClassName, там, вам нужно сделать это на фактическом элементе: error_element[0].style... (соотв. зацикливайтесь на них, если их больше одного.)

Метки: