1---
2title: Accept Messy Input, Output Clean Data
3impact: MEDIUM
4tags: ux, postels, input, validation
5---
6 
7## Accept Messy Input, Output Clean Data
8 
9Inputs should accept messy human data and normalize it. Validate generously, format strictly.
10 
11**Incorrect (rigid format required):**
12 
13```tsx
14function DateInput({ onChange }) {
15  return (
16    <input
17      type="text"
18      placeholder="YYYY-MM-DD"
19      pattern="\d{4}-\d{2}-\d{2}"
20      onChange={onChange}
21    />
22  );
23}
24```
25 
26**Correct (accepts multiple formats):**
27 
28```tsx
29function DateInput({ onChange }) {
30  function handleChange(e) {
31    const parsed = parseFlexibleDate(e.target.value);
32    if (parsed) onChange(parsed);
33  }
34 
35  return (
36    <input
37      type="text"
38      placeholder="Any date format"
39      onChange={handleChange}
40    />
41  );
42}
43```
44 
45Reference: Postel, J. (1980). RFC 761 — Transmission Control Protocol.
46