Form validation patterns in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the validation function from Remix.

Remix

import { [1] } from '@remix-run/node';

Drag options to blanks, or click blank then click option'

AuseActionData

Bjson

Credirect

Dvalidate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'validate' which is not a Remix export.

Confusing 'redirect' with JSON response function.

The json function is imported from '@remix-run/node' to send JSON responses, often used in validation.

2fill in blank

medium

Complete the code to define a validation function that checks if the email is present.

Remix

function validateEmail(email) {
  if (!email || email.trim() === '') {
    return [1];
  }
  return null;
}

Drag options to blanks, or click blank then click option'

A'Email is required'

Bnull

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Returning null instead of an error message.

Returning boolean values instead of error messages.

The function returns an error message string when the email is missing or empty.

3fill in blank

hard

Fix the error in the action function to correctly parse form data.

Remix

export async function action({ request }) {
  const formData = await request.[1]();
  const email = formData.get('email');
  // validation logic
}

Drag options to blanks, or click blank then click option'

Ajson

BformData()

CformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'json' instead of 'formData'.

Adding parentheses inside the blank causing syntax errors.

The correct method to get form data from the request is request.formData(), so the blank should be filled with formData to complete request.formData().

4fill in blank

hard

Fill both blanks to create an error object with a message and return it as JSON.

Remix

const errors = { email: [1] };
return [2](errors, { status: 400 });

Drag options to blanks, or click blank then click option'

A'Email is invalid'

Bjson

Credirect

D'Email is required'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' instead of 'json' for returning errors.

Using wrong error messages.

The error message is 'Email is required' and the json function is used to return the errors with status 400.

5fill in blank

hard

Fill all three blanks to extract form data, validate it, and return errors if any.

Remix

export async function action({ request }) {
  const formData = await request.[1]();
  const email = formData.get('[2]');
  const errors = {};
  if (!email) errors.email = '[3]';
  if (Object.keys(errors).length) {
    return json(errors, { status: 400 });
  }
  // continue processing
}

Drag options to blanks, or click blank then click option'

AformData

Bemail

CEmail is required

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'json' in the first blank instead of 'formData'.

Using wrong field name in second blank.

Leaving error message blank or incorrect.

The blanks fill the method to get form data, the form field name, and the error message respectively.