Implementing Event-Driven Forms with the Observer Pattern

Forms are often the heart of landing pages, but as they grow, keeping the UI in sync with state changes becomes a logistical nightmare. In the Greenset-Landing project, we recently refactored our form handling to adopt the Observer pattern, moving away from tight coupling between our input elements and data logic.

The Problem with Tight Coupling

When every input field directly updates the global state, your code starts to look like a giant web of spaghetti. If a validation rule changes or you add a new tracking pixel for submissions, you end up hunting through every interaction handler to ensure things don't break.

Instead of "pushing" changes, we decided to "broadcast" them.

Moving to an Observer Approach

Think of the Observer pattern like a newsletter subscription. The form input (the Subject) doesn't need to know who is listening to it. It simply publishes an update, and any number of listeners (the Observers) can react—whether that is validating an email field, updating a submit button's state, or logging metrics.

class FormSubject {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers.push(fn);
  }

  notify(data) {
    this.observers.forEach(fn => fn(data));
  }
}

const formEmitter = new FormSubject();

// Add a listener for form validation
formEmitter.subscribe((data) => {
  console.log('Validating field:', data.field);
});

Why This Scales Better

By decoupling the input interaction from the side effects, your codebase becomes modular. You can add new behaviors—like saving progress to local storage—without touching the original validation or submission logic. You are essentially creating a plug-and-play architecture for your form's lifecycle.

Actionable Takeaway

The next time you find yourself adding a third or fourth function call inside a single onchange event, stop. Extract that logic into an observer. Start by creating a simple event bus for your form fields; you will find that your event handlers remain clean, predictable, and significantly easier to test.

Generated with Gitvlg.com