Form validation patterns in Remix - Step-by-Step Execution

Concept Flow - Form validation patterns

User fills form

↓

User submits form

↓

Run validation checks

↓

Process valid data

The user fills and submits a form, triggering validation. If valid, data is processed; if not, errors show.

Execution Sample

Remix

export async function action({ request }) {
  const formData = await request.formData();
  const email = formData.get('email');
  if (!email || !email.includes('@')) {
    return { error: 'Invalid email' };
  }
  return { success: true };
}

This code checks if the email field is present and contains '@', returning error or success accordingly.

Execution Table

Step	Action	Input Value	Validation Check	Result	Next Step
1	Receive form data	{ email: '[e-mail]' }	N/A	Data received	Check email validity
2	Check if email exists	'[e-mail]'	email present?	Yes	Check email format
3	Check email format	'[e-mail]'	contains '@'?	Yes	Return success
4	Return response	N/A	N/A	{ success: true }	End
5	Receive form data	{ email: 'userexample.com' }	N/A	Data received	Check email validity
6	Check if email exists	'userexample.com'	email present?	Yes	Check email format
7	Check email format	'userexample.com'	contains '@'?	No	Return error
8	Return response	N/A	N/A	{ error: 'Invalid email' }	End
9	Receive form data	{ email: '' }	N/A	Data received	Check email validity
10	Check if email exists	''	email present?	No	Return error
11	Return response	N/A	N/A	{ error: 'Invalid email' }	End

💡 Execution stops after returning success or error response based on validation.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
formData	undefined	{ email: '[e-mail]' }	{ email: '[e-mail]' }	{ email: '[e-mail]' }	N/A
email	undefined	'[e-mail]'	'[e-mail]'	'[e-mail]'	N/A
validationResult	undefined	undefined	undefined	success	N/A

Key Moments - 3 Insights

Why does the validation fail if the email is empty?

Because the check at step 10 in the execution_table shows the email is missing or empty, so it returns an error immediately.

What happens if the email does not contain '@'?

At step 7, the validation checks for '@' and finds it missing, so it returns an error as shown in step 8.

Why do we return success only after all checks pass?

Because the code only reaches step 4 after confirming the email exists and contains '@', ensuring valid data before success.

Visual Quiz - 3 Questions

Look at the execution_table, what is the validation result at step 3 when email is '[e-mail]'?

A Error

B Success

C Undefined

D Pending

💡 Hint

Check the 'Result' column at step 3 in the execution_table.

At which step does the validation detect a missing email?

A Step 7

B Step 2

C Step 10

D Step 5

💡 Hint

Look for the 'email present?' check with 'No' in the execution_table.

If the email input changes to '[e-mail]', how does the variable 'validationResult' change after step 3?

A It becomes 'success'

B It stays undefined

C It becomes 'error'

D It becomes null

💡 Hint

Refer to variable_tracker for 'validationResult' after step 3 with a valid email.

Concept Snapshot

Form validation in Remix:
- User submits form data
- Server action reads formData
- Validate fields (e.g., email presence and format)
- Return error object if invalid
- Return success if valid
- Show errors or proceed accordingly

Full Transcript

In Remix form validation, when a user submits a form, the server action function receives the form data. It extracts fields like email and checks if they exist and meet simple rules, such as containing '@'. If validation fails, an error object is returned, which the UI can show to the user. If validation passes, a success response is returned, allowing further processing. This flow ensures only valid data is accepted and users get immediate feedback on mistakes.