1

у меня есть форма, в ней есть инпуты. Как сделать так, чтобы после того, как я сабмитнула форму, стили инпутов обнулялись. У меня, когда вводишь правильные данные, инпуты становятся зелеными. И я хочу, чтобы после отправки формы, эти зеленые инпуты стали обычными. Попробовала сделать таким образом ( formcontrol.className.remove('form-control success'); ), но не вышло - выдает ошибку "Uncaught TypeError: Cannot read property 'remove' of undefined".

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const submit = document.getElementById('submit');
const message = document.getElementById('message');
const formInputs = form.querySelectorAll("input");
const formcontrol = document.getElementsByClassName('form-control');
const data = JSON.parse((localStorage.getItem("username") && localStorage.getItem("email") && localStorage.getItem("password"))|| "[]");

form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
    const username = document.querySelector("#username").value;
    const email = document.querySelector("#email").value;
    const password = document.querySelector("#password").value;
    data.push({
    username: username,
    email: email,
    password: password,
  });
  console.log(data);
  localStorage.setItem("data", JSON.stringify(data));
  formInputs.forEach((input) => {
    if (input.type !== "submit") {
        input.value = "" ;
    formcontrol.className.remove('form-control success');
    }
  });
});


function checkInputs() {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();
    
    if(usernameValue !== '') {
        setSuccessFor(username);
        localStorage.getItem(username);
    }

    if (!isEmail(emailValue)) {
        setErrorFor(email, 'Not a valid email');
    } else {
        setSuccessFor(email);
        localStorage.getItem(email);

    }
    
    if(passwordValue !== '') {
        setSuccessFor(password);
        localStorage.getItem(password);
    }
    
    if(passwordValue !== password2Value) {
        setErrorFor(password2, 'Passwords do not match');

    } else{
        setSuccessFor(password2);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}
    
function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
.form-control.success input {
    background-color: #2ecc71;
}

.form-control.error input {
    background-color: red;
}
  <div class="wrapper">
        <div class="title">Create account</div>
        <form id="form" class="form">
            <div class="form-control">
                <input type="text" placeholder="Username" id="username" required>
            </div>
            <div class="form-control">
                <input type="email" placeholder="Email" id="email" required>
                <small>Error message</small>
            </div>
            <div class="form-control">
                <input type="password" placeholder="Password" id="password" required>
            </div>
            <div class="form-control">
                <input type="password" placeholder="Confirm password" id="password2" required>
                <small>Error message</small>
            </div>
            <input id="submit" name="submit" type="submit" class = "form-button" value="Create"></input>
        </form>
    </div>

5
  • Попробуйте вместо className использовать classList. 14 июл 2021 в 12:33
  • Попробовала, все та же ошибка(
    – ant
    14 июл 2021 в 12:36
  • У вас formcontrol - коллекция элементов, а не один элемент. 14 июл 2021 в 12:43
  • да, и как быть?
    – ant
    14 июл 2021 в 12:51
  • Быть как человек разумный: закрыть редактор, открыть учебные материалы по веб-технологиям (например, на MDN), и начать изучать... Код составленный из набранных "на авось" непонятных слов, весьма редко работает.
    – yar85
    14 июл 2021 в 13:13

3 ответа 3

0

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const submit = document.getElementById('submit');
const message = document.getElementById('message');
const formInputs = form.querySelectorAll("input");
const formcontrol = document.getElementsByClassName('form-control');
// const data = JSON.parse((localStorage.getItem("username") && localStorage.getItem("email") && localStorage.getItem("password"))|| "[]");
const data = [];

form.addEventListener('submit', (e) => {
  e.preventDefault();
  checkInputs();
  const username = document.querySelector("#username").value;
  const email = document.querySelector("#email").value;
  const password = document.querySelector("#password").value;
  data.push({
    username: username,
    email: email,
    password: password,
  });
  console.log(data);
  // localStorage.setItem("data", JSON.stringify(data));
  formInputs.forEach((input) => {
    if (input.type !== "submit") {
      input.value = "";
      const formControl = input.parentElement;
      formControl.classList.remove('success');
    }
  });
});


function checkInputs() {
  const usernameValue = username.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  const password2Value = password2.value.trim();

  if (usernameValue !== '') {
    setSuccessFor(username);
    // localStorage.getItem(username);
  }

  if (!isEmail(emailValue)) {
    setErrorFor(email, 'Not a valid email');
  } else {
    setSuccessFor(email);
    // localStorage.getItem(email);

  }

  if (passwordValue !== '') {
    setSuccessFor(password);
    // localStorage.getItem(password);
  }

  if (passwordValue !== password2Value) {
    setErrorFor(password2, 'Passwords do not match');

  } else {
    setSuccessFor(password2);
  }
}

function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  formControl.classList.add('form-control', 'error');
  small.innerText = message;
}

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.classList.add('form-control', 'success');
}

function isEmail(email) {
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
.form-control.success input {
  background-color: #2ecc71;
}

.form-control.error input {
  background-color: red;
}
<div class="wrapper">
  <div class="title">Create account</div>
  <form id="form" class="form">
    <div class="form-control">
      <input type="text" placeholder="Username" id="username" required>
    </div>
    <div class="form-control">
      <input type="email" placeholder="Email" id="email" required>
      <small>Error message</small>
    </div>
    <div class="form-control">
      <input type="password" placeholder="Password" id="password" required>
    </div>
    <div class="form-control">
      <input type="password" placeholder="Confirm password" id="password2" required>
      <small>Error message</small>
    </div>
    <input id="submit" name="submit" type="submit" class="form-button" value="Create"></input>
  </form>
</div>

0
formInputs.forEach((input) => {
  if (input.type !== "submit") {
    input.value = "";
    input.classList.remove('success');
  }
});

или

for (const input of formInputs) {
  if (input.type === "submit") continue;
  input.value = "";
  input.classList.remove('success');
}

То есть, formcontrol.className 🠆 input.classList.
NodeList не содержит свойства className (а даже если бы и содержал - такое свойство было бы строкой, и у строк нет метода remove).

0
const formInputs = document.querySelectorAll('.form-control input');

function resetFormInputs() {
 form.reset();
 formInputs.forEach((input) => input.classList.remove('success'));
}
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 15 июл 2021 в 5:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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