Build a Form Validation Utility Supporting Field-Level and Cross-Field Rules

Q: Build a Form Validation Utility Supporting Field-Level and Cross-Field Rules

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Medium > **How to read this doc:** the subtlest real correctness requirement — that a cross-field rule must NOT overwrite an existing field-level error on the same field — was verified directly: an empty `confirmPassword` field correctly kept its own "required" message rather than being overwritten by the mismatch rule. ## 1. The problem, restated A form validator runs two kinds of rules against a set of field values: FIELD-LEVEL rules (each concerning exactly one field, like "required" or "minimum length"), and CROSS-FIELD rules (concerning the RELATIONSHIP between two or more fields, like "these two password fields must match"). It returns whether the whole form is valid, plus a map of field name to error message for every field that failed. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | Cross-field rule overwriting an existing

The problem

Problem, as an interviewer would state it: "Build a form validation utility supporting both per-field rules (required, min length) AND cross-field rules (like confirming two password fields match)."

Examples:

Code

validator.validate({ password: "abc12345", confirmPassword: "different" });
// { valid: false, errors: { confirmPassword: "Passwords do not match" } }

Clarifying questions expected:

If a field already has its own field-level error, should a cross-field rule involving that same field still be allowed to overwrite it?
Should field-level rules stop at the FIRST failing rule per field, or collect every failing rule's message?
Should validation run eagerly (on every keystroke) or only on submit — and does that change this utility's own design?

Code / implementation expected: Yes — real, direct proof of field-level errors, a cross-field mismatch error, a fully valid case, and the subtle precedence case where a cross-field rule must not overwrite an existing field-level error.

validation
forms

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Medium

How to read this doc: the subtlest real correctness requirement — that a cross-field rule must NOT overwrite an existing field-level error on the same field — was verified directly: an empty confirmPassword field correctly kept its own "required" message rather than being overwritten by the mismatch rule.

1. The problem, restated

A form validator runs two kinds of rules against a set of field values: FIELD-LEVEL rules (each concerning exactly one field, like "required" or "minimum length"), and CROSS-FIELD rules (concerning the RELATIONSHIP between two or more fields, like "these two password fields must match"). It returns whether the whole form is valid, plus a map of field name to error message for every field that failed.

2. Clarifying questions a strong candi

The solution is hidden so you can try first

7 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: field-level and cross-field validation both work correctly, and a cross-field rule does not overwrite an existing field-level error