This is what the log-in form and the script for changing the CSS based on whether the field is empty or not look like:
const form = document.getElementById('forma');
const email = document.getElementById('email');
const lozinka = document.getElementById('lozinka');
const faliemail = document.getElementById('faliemail');
const falilozinka = document.getElementById('falilozinka');
form
.addEventListener(
'submit',
(event) => {
email.classList.toggle('error', !email.validity.valid);
lozinka.classList.toggle('error', !lozinka.validity.valid);
faliemail.classList.toggle('promeni', !email.validity.valid);
falilozinka.classList.toggle('promeni', !lozinka.validity.valid);
if (!email.validity.valid) {
event.preventDefault();
}
if (!lozinka.validity.valid) {
event.preventDefault();
}
}
);
email
.addEventListener(
'input',
() => {
email.classList.toggle('uredu', email.validity.valid);
}
);
lozinka
.addEventListener(
'input',
() => {
lozinka.classList.toggle('uredu', lozinka.validity.valid);
}
);#faliemail {
display: none;
}
#falilozinka {
display: none;
}
#lozinka.error {
border: 2px solid #eb7178;
}
#email.error {
border: 2px solid #eb7178;
}
#faliemail.promeni {
display: flex;
margin-top: 5px;
}
#faliemail.promeni h5 {
color: #eb7178;
}
#falilozinka.promeni {
display: flex;
margin-top: 5px;
}
#falilozinka.promeni h5 {
color: #eb7178;
}
#email.uredu {
border: none;
}
#lozinka.uredu {
border: none;
}<form class="container" method="post" action="" id="forma" enctype="multipart/form-data" novalidate>
<h3>Email*</h3>
<input type="email" name="email" id="email" class="input" placeholder="Email" required>
<div id="faliemail">
<h5 class="crvena">Unesi email</h5>
</div>
<h3>Lozinka*</h3>
<input type="password" name="lozinka" id="lozinka" class="input" placeholder="Ĺ ifra" required>
<div id="falilozinka">
<h5 class="crvena">Unesi lozinku</h5>
</div>
<div class="buttoncontainer">
<button class="button" name="button" id="button" type="submit">Prijavi se</button>
</div>
</form>When I go to the sign-up page though, it doesn’t quite work the same. Here’s that form and the script:
const form = document.getElementById('formareg');
const email = document.getElementById('email');
const lozinka = document.getElementById('lozinka');
const ime = document.getElementById('ime');
const prezime = document.getElementById('prezime');
form
.addEventListener(
'submit',
(event) => {
ime.classList.toggle('error', !ime.validity.valid);
prezime.classList.toggle('error', !prezime.validity.valid);
email.classList.toggle('error', !email.validity.valid);
lozinka.classList.toggle('error', !lozinka.validity.valid);
faliemail.classList.toggle('promeni', !email.validity.valid);
falilozinka.classList.toggle('promeni', !lozinka.validity.valid);
faliime.classList.toggle('promeni', !ime.validity.valid);
faliprezime.classList.toggle('promeni', !prezime.validity.valid);
if (!ime.validity.valid) {
event.preventDefault();
}
if (!prezime.validity.valid) {
event.preventDefault();
}
if (!email.validity.valid) {
event.preventDefault();
}
if (!lozinka.validity.valid) {
event.preventDefault();
}
}
);
ime
.addEventListener(
'input',
() => {
ime.classList.toggle('uredu', ime.validity.valid);
}
);
prezime
.addEventListener(
'input',
() => {
prezime.classList.toggle('uredu', prezime.validity.valid);
}
);
email
.addEventListener(
'input',
() => {
email.classList.toggle('uredu', email.validity.valid);
}
);
lozinka
.addEventListener(
'input',
() => {
lozinka.classList.toggle('uredu', lozinka.validity.valid);
}
);#ime.uredu {
border: none;
}
#ime.error {
border: 2px solid #eb7178;
}
#prezime.uredu {
border: none;
}
#prezime.error {
border: 2px solid #eb7178;
}
#faliime {
display: none;
}
#faliime.promeni {
display: flex;
margin-top: 5px;
}
#faliime.promeni h5 {
color: #eb7178;
}
#faliprezime {
display: none;
}
#faliprezime.promeni {
display: flex;
margin-top: 5px;
}
#faliprezime.promeni h5 {
color: #eb7178;
}<form class="container" method="post" action="" autocomplete="off" id="formareg" enctype="multipart/form-data" novalidate>
<h3>Ime*</h3>
<input type="text" name="ime" id="ime" class="input" placeholder="Ime" required>
<div id="faliime">
<h5 class="crvena">Unesi ime</h5>
</div>
<h3>Prezime*</h3>
<input type="text" name="prezime" id="prezime" class="input" placeholder="Prezime" required>
<div id="faliprezime">
<h5 class="crvena">Unesi prezime</h5>
</div>
<h3>Email*</h3>
<input type="email" name="email" id="email" class="input" placeholder="Email" required>
<div id="faliemail">
<h5 class="crvena">Unesi email</h5>
</div>
<h3>Lozinka*</h3>
<input type="password" name="lozinka" id="lozinka" class="input" placeholder="Ĺ ifra" required>
<div id="falilozinka">
<h5 class="crvena">Unesi lozinku</h5>
</div>
<div class="buttoncontainerreg">
<button class="button2b" name="button2b" type="submit" onclick="predajKorisnika();">Registruj se</button>
</div>
<div class="prikazilink" id="prikazilink">
<a href="prijava.php" class="reroute" id="link">
<p>Već imaš nalog? Prijavi se
<p>
</a>
<div>
</form>The log-in form works in a way where when I submit the form with the empty fields, I get the falilozinka and faliemail divs get displayed and the input fields get the red border. As soon as I type in something, the fields start to change and the border disappears. I have one more form on my website that also works the same.
The problem is in the sign-up, or the second form I included. The email and lozinka fields work as they should. I have the problem with ime and prezime fields. They work properly with submitting, where only the empty ones will become red, but when I try to type something inside them, the border remains red and I can’t figure out why that is. Can someone please help me out?
>Solution :
You add .error to the #email input but you don’t have a style. Change
#ime.error {
border: 2px solid #eb7178;
}
#prezime.error {
border: 2px solid #eb7178;
}
to
.error {
border: 2px solid #eb7178;
}
…and it will style it correctly. I would also suggest to use outline instead of border so things don’t jump around more than necessary.