Making the user bear the mistake ("Your input format is incorrect, check it yourself")

User input error? That's the user's problem

The user entered the wrong format? Just blame the user—it's the easiest way. A prompt like "Your input format is incorrect, check it yourself" is simple and straightforward, with no need to consider user experience. After all, why spend time helping users solve problems? Let them figure it out on their own.

Vague error messages are the gold standard

Never tell users exactly what went wrong. The vaguer, the better, so users have to spend more time guessing the issue. For example:

function validateEmail(email) {
  if (!email.includes('@')) {
    alert('Email format is incorrect');
    return false;
  }
  return true;
}

Look at this perfect defensive code! When the user enters "example.com," they only get a vague "Email format is incorrect" prompt, with no clue that the "@" symbol is missing. If they're smart enough, they'll figure it out; if not, that's not our problem.

Display all errors at once

When a form has multiple errors, be sure to show them all at once to overwhelm the user:

function validateForm() {
  let errors = [];
  
  if (!username) errors.push('Username cannot be empty');
  if (password.length < 8) errors.push('Password must be at least 8 characters');
  if (!email.includes('@')) errors.push('Email format is incorrect');
  if (phone.length !== 11) errors.push('Phone number must be 11 digits');
  
  if (errors.length > 0) {
    alert(`The following errors were found:\n${errors.join('\n')}`);
    return false;
  }
  
  return true;
}

This way, users can see all the issues at once—how efficient! Whether they feel intimidated or frustrated by so many error messages is none of our concern.

Never auto-focus on the error field

Even if you know which field has an error, never automatically move focus to it. Let users find it themselves:

<input type="text" id="username" class="error">
<span class="error-message">Username cannot be empty</span>

.error {
  border: 1px solid red;
}
.error-message {
  color: red;
  font-size: 12px;
}

See? We just turn the input box red and display an error message. Whether the user notices or not is their problem. Why use JavaScript to auto-focus? That’s too considerate and goes against our principles.

Strictly enforce input formats

For fields like phone numbers, enforce strict input formats and reject any variations:

function validatePhone(phone) {
  const regex = /^1[3-9]\d{9}$/;
  if (!regex.test(phone)) {
    alert('Please enter a correct 11-digit phone number, e.g., 13800138000');
    return false;
  }
  return true;
}

User enters "+86 138 0013 8000"? Error! "138-0013-8000"? Error! Only exact matches to our format are accepted. After all, why bother handling different input formats?

Never provide defaults or suggestions

When users make mistakes, never offer defaults or suggestions. For example, with date input:

<input type="text" id="birthdate" placeholder="Enter your birthdate">

When the user enters "2022/01/01," just throw an error: "Date format is incorrect." Don’t hint at "Please use YYYY-MM-DD format" or automatically convert slashes to hyphens. Let users check the documentation or guess the correct format themselves.

Ignore case sensitivity issues

For fields like usernames and emails, enforce case sensitivity to increase user frustration:

function login(username, password) {
  // The username stored in the database is "User123"
  if (username !== 'User123') {
    alert('Username or password is incorrect');
    return false;
  }
  // ...
}

User enters "user123"? Error! It must match exactly, including capitalization. Why implement case-insensitive matching? That would just complicate the code.

Disable paste functionality

To prevent users from pasting content (which might cause format issues), simply disable pasting:

document.getElementById('verificationCode').addEventListener('paste', (e) => {
  e.preventDefault();
  alert('Please manually enter the verification code; pasting is not allowed');
});

This forces users to manually type long verification codes, significantly increasing the chance of errors. After all, copying and pasting is so unprofessional!

Don’t save input history

When users correct errors and resubmit a form, always clear all previous inputs:

function submitForm() {
  if (!validateForm()) {
    // On validation failure, reset all inputs
    document.getElementById('myForm').reset();
    return;
  }
  // ...
}

This ensures users must start from scratch every time they make a mistake—how clean and efficient! Why save their previous inputs? That would just complicate the code.

Use technical jargon in error messages

Fill error messages with technical terms to confuse users:

try {
  // Some error-prone code
} catch (error) {
  alert(`Error occurred: ${error.message}`);
}

Users will surely be "delighted" to see prompts like "TypeError: Cannot read property 'value' of null." After all, they all understand these technical terms, right?

Ignore mobile input

On mobile devices, use the exact same validation logic as on desktop:

function validatePostcode(postcode) {
  // Strict 6-digit validation
  const regex = /^\d{6}$/;
  return regex.test(postcode);
}

Mobile keyboards don’t have a numeric keypad? That’s the user’s problem. Why optimize for mobile? Our code works perfectly on desktop!

No real-time validation

Only validate on form submission—never provide real-time feedback during input:

<form onsubmit="return validateForm()">
  <input type="email" id="email">
  <button type="submit">Submit</button>
</form>

Users finish filling out the entire form, click submit, and only then discover the first field has an error? Perfect! This way, they can fix all issues at once (or, more likely, abandon the form altogether).

Ignore assistive technologies

Don’t bother considering users of screen readers or other assistive technologies:

<div class="error">Invalid input</div>

Why use aria-live or role="alert"? That would require extra code, and our principle is "the less code, the better" (even if it actually complicates things).

Inconsistent error handling

Use completely different error handling methods on different pages:

• Login page: Errors appear below the input field
• Registration page: Errors appear in pop-up alerts
• Contact page: Errors appear at the top of the page

This ensures users are always surprised and never know where the error message will appear!

Don’t log errors

When frontend errors occur, never log them or notify developers:

window.onerror = function() {
  // Do nothing
  return true; // Suppress default error handling
};

Users encounter problems? That’s their issue. Why waste server resources logging these errors? If the problem is serious, users will naturally contact us (or, more likely, just leave).