Advanced Forms — Programuoki

Code

js/views/contact.js — cross-field validation

In the code column — js/views/contact.js. It uses lesson 11's attachLiveValidation, but with cross-field rules and a full submit lifecycle.

The cross-field part is 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;
}

Because attachLiveValidation calls getRules(values) with the current values each time, picking "Bug report" instantly makes the message rule stricter (min 50). Change the subject back — the field re-validates.

The submit lifecycle, inside submit:

submitBtn.disabled = true;
submitBtn.textContent = 'Sending…';
try {
  await fakeSend(result.values);
  // ...show the success panel...
} catch (error) {
  showToast(error.message, 'error');
} finally {
  submitBtn.disabled = false;
  submitBtn.textContent = 'Send message';
}

finally matters: whether it succeeded or failed, the button always resets. Without it, after an error the button would stay "Sending…" and disabled forever.

And fakeSend — an honest simulation (it even "rejects" @example.com so you can see the error path):

// The real version: await fetch('/api/contact', { method:'POST', ... })
// The surrounding code doesn't change — only this function.

Tip. Notice that changing subject also updates the hint under the field ("bug reports: 50+ characters"). A good form explains the rule before the user runs into it, not just shows an error after the fact.

contact.js CREATE

Create this file in 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));
}