у меня есть форма, в ней есть инпуты. Как сделать так, чтобы после того, как я сабмитнула форму, стили инпутов обнулялись. У меня, когда вводишь правильные данные, инпуты становятся зелеными. И я хочу, чтобы после отправки формы, эти зеленые инпуты стали обычными. Попробовала сделать таким образом ( 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>
className
использоватьclassList
.formcontrol
- коллекция элементов, а не один элемент.