Question

Technologies:

javascript

html

css

Tolerim

12 hours ago

The functions and logic I have are identical for various divs and CSS alterations, but they only have an impact on a few.

Here's what the log-in form and CSS script for changing input fields based on whether they're empty or not looks 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);
});

And here's the same code for the sign-up form:


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);
});

The log-in form works by displaying falilozinka and faliemail divs and adding a red border to input fields when submitted with empty fields. As soon as something is entered, the fields change and the border disappears. The problem is with the sign-up form, where the ime and prezime fields don't remove the red border even when content is added. Any suggestions on how to fix this issue?

Answers(1)

Accepted Answer

It seems that the issue lies in the script for the second form. In the second form's script, you are toggling the error class on the ime and prezime elements based on their validity. However, in the input event listeners for these elements, you are toggling the uredu class based on their validity instead of toggling the error class. To fix this issue, you need to update the input event listeners for ime and prezime elements to toggle the error class instead of the uredu class. Here's the updated script:

ime.addEventListener(
  'input',
  () => {
    ime.classList.toggle('error', !ime.validity.valid);
  }
);

prezime.addEventListener(
  'input',
  () => {
    prezime.classList.toggle('error', !prezime.validity.valid);
  }
);

With this change, the ime and prezime fields should work as expected, by toggling the red border on submit when they are empty and by removing the border when the user starts typing.