js/views/contact.js — kryžminė validacija

Kodo stulpelyje — js/views/contact.js. Naudoja 11 pamokos attachLiveValidation, bet su kryžminėmis taisyklėmis ir pilnu pateikimo ciklu.

Kryžminė dalis — rules(values):

function rules(values) {
  const base = { /* name, email, subject, message: min 20 */ };
  if (values.subject === 'bug') {
    base.message = [required('Message'), minLength(50, 'A bug report'), maxLength(1000)];
  }
  return base;
}

Kadangi attachLiveValidation kaskart kviečia getRules(values) su dabartinėmis reikšmėmis, pasirinkus „Bug report" žinutės taisyklė iškart tampa griežtesnė (min 50). Pakeitęs temą — laukas persivertina.

Pateikimo ciklas submit viduje:

submitBtn.disabled = true;
submitBtn.textContent = 'Sending…';
try {
  await fakeSend(result.values);
  // ...rodom sėkmės panelę...
} catch (error) {
  showToast(error.message, 'error');
} finally {
  submitBtn.disabled = false;
  submitBtn.textContent = 'Send message';
}

finally svarbus: kad ir pavyko, ir nepavyko — mygtukas visada atsistato. Be jo, po klaidos mygtukas liktų „Sending…" ir išjungtas amžinai.

Ir fakeSend — sąžininga imitacija (netgi „atmeta" @example.com, kad pamatytum klaidos kelią):

// Tikroji versija: await fetch('/api/contact', { method:'POST', ... })
// Aplink esantis kodas nesikeičia — tik ši funkcija.

Patarimas. Atkreipk dėmesį, kad subject pakeitimas atnaujina ir užuominą po lauku („bug reports: 50+ characters"). Gera forma paaiškina taisyklę prieš vartotojui į ją atsitrenkiant, ne tik parodo klaidą po fakto.

contact.js SUKURTI

Sukurk šį failą kataloge js/views/

// Contact form.
// HONEST NOTE: there is no backend. We SIMULATE the request — the validation,
// the loading state, the success and error handling are exactly what you'd write
// for a real endpoint. Only fakeSend() would change.

import { attachLiveValidation } from '../forms.js';
import { required, email, minLength, maxLength } from '../validation.js';
import { showToast } from '../toast.js';

const form = document.getElementById('contact-form');
const submitBtn = document.getElementById('contact-submit');

// CROSS-FIELD: rules() receives the current values, so one field can change
// another's rules. Picking "Bug report" raises the message minimum 20 → 50.
function rules(values) {
  const base = {
    name: [required('Name'), maxLength(60, 'Name')],
    email: [required('Email'), email()],
    subject: [required('Subject')],
    message: [required('Message'), minLength(20, 'Message'), maxLength(1000, 'Message')],
  };
  if (values.subject === 'bug') {
    base.message = [required('Message'), minLength(50, 'A bug report'), maxLength(1000, 'Message')];
  }
  return base;
}

export function initContact() {
  const validateAll = attachLiveValidation(form, rules);

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const result = validateAll();
    if (!result.ok) { showToast('Please fix the errors below', 'error'); return; }

    // --- submit lifecycle: disable → "Sending…" → success / error → restore ---
    submitBtn.disabled = true;
    submitBtn.textContent = 'Sending…';
    try {
      await fakeSend(result.values);
      form.classList.add('hidden');                 // show the success panel
      document.getElementById('contact-success').classList.remove('hidden');
      showToast('Message sent');
    } catch (error) {
      showToast(error.message, 'error');            // an error toast, form stays
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = 'Send message';
    }
  });
}

/**
 * Pretend to POST the form. A real one would be:
 *   const res = await fetch('/api/contact', { method: 'POST', body: JSON.stringify(values) });
 *   if (!res.ok) throw new Error('Could not send your message.');
 * Everything around it is identical — only THIS function changes.
 */
function fakeSend(values) {
  return new Promise((resolve, reject) => setTimeout(() => {
    if (values.email.endsWith('@example.com')) reject(new Error('That email domain is not accepted.'));
    else resolve({ ok: true });
  }, 900));
}