🔐 Zaloguj się aby edytować

Login: Hasło: Zaloguj

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form'); 
  const summary = document.getElementById('message-summary'); 

  const fields = Array.from(form.querySelectorAll('input, textarea')).filter(field =>
    document.getElementById(`${field.id}-message`)
  );

  fields.forEach(field => {
    const id = field.id;

    const description = document.getElementById(`${id}-description`);
    const error = document.getElementById(`${id}-error`);
    const success = document.getElementById(`${id}-success`);
    const validate = document.getElementById(`${id}-validate`);
    const messageBox = document.getElementById(`${id}-message`);
    const isRequired = field.hasAttribute('required');

    field.addEventListener('focus', () => {
      if (description) {
        messageBox.textContent = description.textContent;
        updateMessageClass(messageBox, 'description');
        messageBox.hidden = false;
      }
    });

    field.addEventListener('blur', () => {
      const value = field.value.trim();

      if (!isRequired && value === '') {
        messageBox.textContent = '';
        messageBox.hidden = true;
        return;
      }

      if (isRequired && value === '') {
        showError();
        return;
      }

      if (validate && validate.textContent.trim() !== '') {
        const regex = new RegExp(validate.textContent.trim());
        if (!regex.test(value)) {
          showError();
          return;
        }
      }
      showSuccess();
    });

    function showError() {
      if (error) {
		messageBox.textContent = error.textContent;
        updateMessageClass(messageBox, 'error');
        messageBox.hidden = false;
        field.setAttribute('aria-invalid', 'true');
      }
    }

    function showSuccess() {
      if (success) {
        messageBox.textContent = success.textContent;
        updateMessageClass(messageBox, 'success');
        messageBox.hidden = false;
        field.removeAttribute('aria-invalid');
      }
    }
  });

  form.addEventListener('submit', (e) => {
    e.preventDefault(); 
    let hasErrors = false;
    let messages = [];

    summary.innerHTML = '<h3>Popraw błędy:</h3>';
    summary.hidden = true;
    summary.classList.remove('message-error', 'message-success');

    fields.forEach(field => {
      const id = field.id;
      const value = field.value.trim();
      const error = document.getElementById(`${id}-error`);
      const success = document.getElementById(`${id}-success`);
      const validate = document.getElementById(`${id}-validate`);
      const messageBox = document.getElementById(`${id}-message`);
      const isRequired = field.hasAttribute('required');
      let valid = true;

      if (isRequired && value === '') {
        valid = false;
      }

      if (valid && validate && validate.textContent.trim() !== '') {
        const regex = new RegExp(validate.textContent.trim());
        if (!regex.test(value)) {
          valid = false;
        }
      }

      if (!valid) {
        hasErrors = true;

        if (error) {
		  messageBox.textContent = error.textContent;
          updateMessageClass(messageBox, 'error');
          messageBox.hidden = false;
          field.setAttribute('aria-invalid', 'true');

          messages.push(
            `<li><a href="#${id}" onclick="document.getElementById('${id}').focus(); return false;">${error.textContent}</a></li>`
          );
        }
      } else {
        // Poprawność
        if (success) {
          messageBox.textContent = success.textContent;
          updateMessageClass(messageBox, 'success');
          messageBox.hidden = false;
          field.removeAttribute('aria-invalid');
        }
      }
    });

    if (hasErrors) {
      const ul = document.createElement('ul');
      ul.innerHTML = messages.join('');
      summary.appendChild(ul);
      summary.classList.add('message-error');
      summary.hidden = false;
      summary.focus();
    } else {
      summary.innerHTML = '<h3>Dziękujemy! Formularz został pomyślnie wysłany.</h3>';
      summary.classList.add('message-success');
      summary.hidden = false;

      form.reset();

      fields.forEach(field => {
        const messageBox = document.getElementById(`${field.id}-message`);
        if (messageBox) {
          messageBox.textContent = '';
          messageBox.hidden = true;
        }
      });
    }
  });

  function updateMessageClass(element, type) {
    element.classList.remove('message-error', 'message-success', 'message-description');
    element.classList.add('field-message');
    if (type === 'error') {
      element.classList.add('message-error');
    } else if (type === 'success') {
      element.classList.add('message-success');
    } else {
      element.classList.add('message-description');
    }
  }
});