Implement server-side validation to enhance security and user assistance, preventing client-side bypass. Customize error messages for a seamless design.

Master server-side form validation for data integrity and user-friendly error messages. Enhance UX by securely validating input before server processing.

Server-Side Form Validation and Error Handling

[00:00] Let's open up the editor route and our action is where server code runs. So the user cannot circumvent this no matter what they do, this server code is the code that they're calling and so it will run. So we can do some validation here. So let's create an errors object and then we can say

[00:17] if the title is equal to an empty string, then we know that they did not submit the title. So we can say errors.title. Now here Copilot is saying, hey, why don't you just set errors.title to this string. But it's pretty common to actually have multiple errors per field. So what I'm going to do is turn that into an array

[00:35] and we're going to push onto that error. So let's clean this up a little bit. We'll say title and content on our errors. There's actually a pretty common case where sometimes you've got multiple fields that are in error, or maybe the entire form is an error, like you're not even authorized to submit this form.

[00:53] What are you doing? So what I like to do as just a regular convention, is I say form errors and that's going to be an array. Then we have field errors and that will be an object. So here we'll say errors.field, errors.title.push.

[01:11] This is complaining because it doesn't know what type of this is. So we can say as array of string on all of these and now we are set. Okay, great. If we take a look at the type there, that's exactly what we're hoping for. We can get auto-complete and all that for that.

[01:28] Okay, so if the title is an empty string, it's required. Then we can say if the title.length is greater than 100, then we can say title must be 100 characters or less. Now, we have a magic number here.

[01:45] Magic numbers are basically like a hard-coded number that doesn't communicate really its intent. It's pretty clear to us looking at this that 100 is fine. But the other problem with magic numbers is keeping them in sync with other places that they need to be. So what we're going to do is I'm going to extract this to

[02:03] a variable that we can use that I'm just simply going to call title.max.length. Then we can come up here and we can say title.max.length is 100, and we can do a content.max.length of 10,000. Let's do the same thing there,

[02:21] content.max.length. Awesome. Then we can use title.max.length, and we can even use title.max.length in here as well if we want. That works. Awesome. Then we do the same thing for the content.

[02:38] Content is required, and if it's greater than the max.length, then we'll do that. Okay, so we've done some validation, but we're not sending those errors back to the user. We need to show those errors and definitely not update the note. So we need to return early or skip updating that note. We don't want to redirect either.

[02:56] We want to make sure that we send those errors back so they can finish submitting the form. So we're going to send back some JSON. So to determine whether we have errors, we're going to say has errors, and Copilot could probably fix this for us. Here we go. So we've got form errors, length is greater than zero. So if there are any form errors,

[03:14] and then or take all the values of the field errors, and if some of those have a length of greater than zero, then we know that we've got an error there too. That works just fine for me. Thanks, Copilot. So if it has errors, then we're going to return JSON of those errors. I like to use an object for this.

[03:33] So I'm going to put that inside of an object, and we can say the status is 400. So the submission was incorrect. Status of 400 is basically like, if you try this again, same thing's going to happen. So don't try it again. You got to change the way that you're submitting that. So we'll save all that, and then actually we can come in here,

[03:52] we can try that, and we're going to get the police fill out this field. So what we're going to do is just to test this out. We're going to say no validate. We're going to say browser. I know that we've got these attributes, but we're going to ignore those for now. It's still important to keep those attributes, even if you do no validate because of the screen reader and other implications there. So we're going to leave those on there,

[04:12] but add no validate so that we can test out this server interaction, and then we're going to have our own custom validation anyway. So with that, we hit Submit. Here, let's try refreshing and make sure that it's happening. There we go. Great. So we're not getting any validation showing up,

[04:31] but you'll notice that I hit Submit and it's not actually redirecting the user. It's not working. If we open up our DevTools, go to the Network tab, and then we try this submission again, we're going to see that 400 status response. So we see the title is empty. If we look at the preview of the response,

[04:50] we're going to see field errors, title is required. Perfect. That's exactly what we're looking for. So the next part of this is the client-side to make this actually work and feel nice. So we're going to grab that error list component and stick it right here,

[05:06] and then we need to get that action data. So that data that we're sending back, this is going to come from the UseActionData hook. So ActionData equals UseActionData, we'll say type of action, and that's going to come from RemixRunReact. Then we're going to get the field errors.

[05:26] So we'll have field errors is going to come from the action data. You'll notice the Elvis operator right there, that's because the action data could potentially be undefined. It will be undefined when the user first appears on the page. They haven't submitted an action, so it will be undefined in that case.

[05:45] If it is defined, we'll grab the errors property and then the field errors. If that doesn't exist, then we'll fall back to null. Then we'll have our form errors, and we'll say ActionData errors form errors or fall back to null. Awesome. Then from there,

[06:04] we can simply add the errors for each one of these. So I've actually gave you an example so that it can be nicely formatted, so we'll just use that. We've got a div with the class name and all that, and then we have our errors for the title. Then we'll do the same thing for our content.

[06:24] Then finally, we do the same thing for the form errors, which will just be form errors. There we go. Now, if I try to submit, we see we've got that there now. We hit Submit. Titles required, and oh-oh, titles required. You got to watch out for those copy-paste errors.

[06:44] So let's try that again and get rid of that. Submit. It's working awesome. Then if we do too many characters, we actually can't because the browser is not going to let us, so we're going to cheat and inspect element and increase the max length because we just want to test this out. Add more characters and then hit Submit.

[07:03] Title must be 100 characters or less. I'm going to assume that the content is going to work just the same. We don't actually have any errors that are going to show up for the form error, but if you want to go ahead and try to add one and just see how that ends up looking.

[07:24] But it is pretty common to have those types of errors on lots of different forms. We're not going to do that for this exercise, but it is something that I recommend doing on all your forms. In the future, we're actually going to have an abstraction that will handle a lot of this stuff for us. So to review things really quickly,

[07:42] by having an action that runs only on the server, we can safely do all the validation that we want and not worry about users being able to circumvent that. Once we've done that validation, if we determine that there are errors, we can return those errors,

[07:59] and then those errors can be sent over to our UI via this action data. Then we can grab those errors and render them appropriately in the different areas of our form. Now, there are a couple other small things that I want to do to make some adjustments to this.

[08:19] Like one thing we could do is move these types a little bit just to make that nicer. You can feel free to do that yourself, the next step of the exercise that will be done. Then another thing that I like to do is I like to really communicate very clearly what the different return types of my action are,

[08:37] and so I almost always will have a status of error. Then I add as const, so that's the status type is literally the string error rather than just being a type of string. This can be really useful, and you'll see this later on as we work through these exercises where we have

[08:57] different status types that we return from our action. Then we can key off of that and say, action data.status is error, that now we know for sure that there is action data and it does have an errors value there.

[09:14] Then otherwise, we'll say null. To me, this just is a little bit more explicit, and so you'll see in the code that I'm writing in these exercises, that's how I do things is I'll add the status error and as const.

[09:30] That is getting some error validation logic that the user cannot circumvent and giving the user a nice error message to boot. It's a good thing.

Server-side Validation and Custom Error Messages

[00:00] Even though the browser supports built-in validation and you can even customize that validation with JavaScript, this is really easy to circumvent. Users can literally just open up the DevTools and go down to here and say, you know what, I think it should have a max length

[00:15] of thousands and then they can circumvent our validation that way. Or they could just hit the endpoint directly, just look at what the network is doing and do that same thing and do whatever they want to with it. So we absolutely always, no matter what, you should have validation on

[00:32] the server. So that's what we're going to do in this exercise. I want you to add some validation for the title and the content on the server side. And I also want you to display error messages. So while we do have some error message right here, we want to be able to customize that to

[00:48] match our aesthetic. And so I'm going to give you a component that you can render for those error messages. And I want you to render those error messages that the server sends back so that we can give the user not only some protection against themselves, but also some help as they

[01:05] work through this stuff and then match our own design and totally customize that. So there are a couple of things that you're going to be doing in this step of the exercise and it's going to be awesome. Have a good time. We'll see you when you're done.

Forms are the primary mechanism for interactivity on the web.

But for all of their importance, forms can be incredibly frustrating for developers and users alike.

There are a lot of moving parts to consider: 

You need to validate user input and handle complex data structures, while being secure from bots and data-stealing attacks. The UI should inform users of any issues as quickly as possible, and be accessible for all.

The Professional Web Forms Workshop will equip you with the tools to handle all of these challenges and more.

## Form Validation

HTML has several attributes built-in that help with form element validation. Unfortunately, they're not enough on their own. On the client-side, bad actors can bypass checks by manually adding the `novalidate` attribute or making requests directly. On the server side, there's no standard way to respond to validation errors other than a generic 400 status code.

In this section, you'll implement a base level of form validation:

- Essential HTML attributes for validation
- Server-side validation with JSON responses
- Displaying errors with the `useActionData` hook
- Disabling default browser validation messages with `useHydrated`

## Accessibility

Accessibility is often an afterthought, but should be a priority. While forms are just one part of the accessibility equation, they're a big one. In this section, you'll learn how to make sure your forms accessible and usable by all of your application's users:

- Properly associating labels with input fields
- Adding appropriate ARIA attributes when necessary
- Manage keyboard focus in response to errors and user interactions
- Creating and using a `useFocus` hook to direct the user’s focus
- Considerations for accessibility testing

## Schema-Based Validation

Manually writing conditional checks for every field in every form is tedious and error-prone: *Is there content in the field? Is it the right type? Is it within the acceptable range? There must be a better way!*

Fortunately, the combination of the Zod and Conform libraries makes it easy to define reusable declarative schemas to validate form data on the client and server:

- Safely replace HTML validation attributes with schemas
- Zod error handling & message customization
- Progressively enhanced validation with Conform
- Share type-safe validation logic between client and server

## File Uploads

Forms need to support more than just text. Images, videos, audio files, and other documents need a different type of input. Depending on the size of the file, you'll have considerations for how and where it is uploaded. In this section, you'll learn how to handle file uploads in a secure and efficient way:

- Uploading images from an `ImageChooser` component
- Handling file uploads on the server
- Schema validation for file uploads with Zod

## Complex Data Structures

The `FormData` API does not support representing objects or arrays– only key/value pairs. It also won't allow you to nest forms within each other. This makes representing complex data structures difficult without jumping through some hoops. Luckily for us, Conform has a great solution when your forms get complex. Here you'll practice:

- Infer field types with Zod
- Nesting objects as a form
- Represent arrays of fields with the `useFieldList` utility
- Add and remove items with Conform's `intent` buttons

## Spam Prevention with Honeypots

Spam bots are constantly crawling the web, looking for forms to submit junk data to boost their client’s search engine rankings and find holes in your security. This can strain server resources, contaminate databases, and cause other unforeseen consequences. One way to combat this is by using a "honeypot", which will prevent a form from being submitted by a bot. This section will teach you how to:

- Create a simple hidden-field validation
- Add a configurable honeypot instance to an action
- Prevent form submissions that are too fast
- Use environment variables for encryption seeds

## CSRF Protection

Cross-Site Request Forgery (CSRF) attacks are a type of malicious exploit where a user is tricked into performing an action they did not intend to. This is usually done by embedding a link or form in a page that the user is already authenticated to. Think of a user logged into their bank account clicking a link that transfers money from their bank account to the attacker's. To prevent this type of attack, you'll want to:

- Create a signed cookie in the user's browser
- Include unique user tokens in forms
- Validate tokens on the server via request headers

## Rate Limiting

You definitely want to prevent bad actors from making tons of requests to try to brute-force their way into your app or cause general chaos. However, malicious intent and spam aren't the only reasons you need to protect your site. Even too many legitimate requests can cause problems. Rate limiting is a way to prevent users from overloading your server with requests. Here you'll learn:

- Considerations for different limits for `GET` vs. `POST` requests
- Implementing basic rate limiting with Express middleware
- Tiered rate limiting depending on which form is being submitted

The Professional Web Forms Workshop will equip you for building complex, fully accessible forms that handle validation and file uploads while preventing spam.

Professional Web Forms

Kent C. Dodds

Full Stack Vol 1

Intro to Professional Web Forms Workshop

Introduction to Workshop

Intro to Form Validation 

Discover the importance of validation in web apps. Learn to implement required field validation for data integrity and UX enhancement.

Leverage HTML attributes for form validation, enhancing UX and accessibility. Explore browser validation and screen reader integration for user guidance.

Form Validation for Accessibility

Required Field Validation for User Input

Prevent incorrect form submissions pre-JavaScript with novalidate attribute using useHydrated hook. Elevate UX, maintain data integrity.

Optimize form validation with 'useHydrated' hook for client-side hydration. Enhance UX with browser-built and server-side validation synergy.

Form Validation with Client-Side Hydration

Dynamic Error Validation with Hooks

Dad Joke Break From Validation

Form Validation

Intro to Accessibility

Learn how to troubleshoot and fix issues with a non-functioning reset button and accessibility problems in a web form.

Learn how to properly associate buttons and form elements, such as the reset button, with their respective forms for improved functionality and accessibility.

Improving Accessibility and Form Associations

Fixing Form Reset Button and Accessibility Issues

Associate error messages with input fields via ARIA attributes for precise screen reader notifications. Learn about semantic HTML and ARIA for accessibility.

Use ARIA attributes like ARIA invalid & describedby. Link error messages to inputs for improved screen reader support, aiding assistive tech users.

Accessible Forms with ARIA Attributes

Error Messages and Accessibility with ARIA Attributes

Enhance app accessibility & UX with focus management: auto-focus error fields, programmable forms, & better editing. Create an inclusive, user-friendly app.

Enhance React app accessibility and UX: auto-focus form inputs and navigate to error messages for improved handling of form errors.

Managing Focus for Form Errors

Focus Management for Better User Experience

Dad Break Joke Accessibility

Accessibility

Intro to Schema Validation

Optimize development with Zod schema validation. Boost efficiency and code robustness, replacing custom logic for an enhanced developer experience. 

Learn how to implement schema validation using Zod in a note editor application. Discover how to define and enforce data

Schema Validation with Zod 

Schema Validation 

Data parsing with Conform's Conform utility. Apply server-side logic and streamline development with additional UI utilities for efficient form handling.

Improve UX & enable progressive enhancement: Replace form validation & error handling with powerful Zod utility in your app

 Form Submission and Error Handling with Conform & Zod

Form Data Parsing with Conform

Enhance UI with Conform's React utilities for end-to-end type safety. Leverage progressive enhancement for a fabulous development experience.

Eliminate custom code for better UX. Seamlessly manage form submission and client-side validation with Conform, ensuring robust server-side validation

Simplifying Form Handling with Conform and Schema Validation

Type Safety with Conform

Dad Joke Break Schema Validation

Schema Validation

Intro to File Upload

Add file upload to edit page for user-friendly image & file attachments. Handle uploads in Remix, enforcing size limits. 

Integrate image upload with form data and memory handling. Use image chooser, manage existing images, set encoding, size limit, and specify alt text. 

Image Upload with Form Data and Memory Upload Handling

File Upload Functionality 

Improve code quality and address TypeScript errors for a robust application, making Lily the life jacket (and yourself) happy.

Update schema for image ID, alt text, and file uploads. Master file validation with Zod for size restrictions and error handling on client & server sides. 

Validating File Uploads with Zod Schema in a Web Application

TypeScript Integration

Dad Joke Break File Upload

File Upload

Intro to Complex Structures 

Address challenges in grouping properties into sub-objects in forms, especially for multiple image uploads. Satisfy Zod's requirements for seamless integration.

Learn to add image field set schema to Zod schema, update HTML elements, and integrate with Conform for type safety and form functionality. 

Implementing Image Field Set with Conform and TypeScript

Grouping and Managing Related Fields in Form Objects

Update your app's schema for multiple images, adapt actions/components, and enable seamless addition/removal of multiple images for an enhanced user experience.

Master dynamic image lists with Qualifax: add and remove images effortlessly. Update schema, implement field sets, and iterate through image choosers with ease.

Dynamic Image Lists with Field Sets 

Multiple Image Uploading 

Dynamic image addition and deletion with alt text functionality, progressive enhancements, and input submission using Conform utilities in web development

Master dynamic button generation for form accessibility using Conform utilities. Modify field sets with list functions, explore progressive enhancement.

Dynamically Delete and Add Buttons

 Interactive Image Management

Dad Joke Break Complex Structures 

Complex Structures

Intro to Honeypot

Add a hidden input field honeypot to deter spam bots, enhance deliverability, and prevent spam issues. Explore additional tips for form security.

Boost sign-up form security with invisible honeypot fields to catch spam bots. Discover effective techniques for handling bot submissions in your app.

Honeypot Fields in Sign Up Forms

Adding a Honeypot to Protect Against Spam Bots

Protect your website from spam bots with automatic updates to Honeypot configurations.

Enhance security with Remix Utils Honeypot fields. Customize divs, ARIA, and server-side validation to deter spam. Best practices for errors and HTTP codes.

Honeypot Fields for Form Security

Honeypot Protection with `remix-utils`

Efficiently implement Honeypot security on forms: Transfer server data to client for reliable bot protection.

Implement honeypot protection: Create provider, configure props, render components, prevent quick form submission, thwart automated bots.

Honeypot Protection

Honeypots for Form Security 

Ensure consistent Honeypot encryption secret across servers and regions for form data integrity and conflict avoidance

Securely add honeypot secret to server validation, configure in local .env for data protection.

Setting Up Honeypot Security for Server Environment Variables

Consistent Encryption with Honeypot Server

Dad Joke Break Honeypot

Honeypot

Intro to CSRF

Implement CSRF protection: Generate tokens, set secure cookies, associate with clients, and use environment variables.

Implement Node.js CSRF utility: Generate tokens, secure cookies, prevent cross-site request forgery attacks.  

Creating and Managing CSRF Tokens With Node.js

CSRF Protection with Cookies 

Protect user data with authenticity tokens: Render, verify, and enhance user experience.

Secure forms with Authenticity Token input and CSRF validation for protection against tampering. Improve security and error responses.

Security with Authenticity Token and CSRF Validation

Authenticity With Token Protection 

Dad Joke Break CSRF

Cross-Site Request Forgery

Intro to Rate Limit 

Learn how to implement rate limiting middleware in Express for efficient resource management in your server.

Safeguarding Your Server: Adding Rate Limit Configuration

Optimizing Your Express Server with Rate Limiting Middleware

Implement tiered rate limiting: Strong for sign-up/login, moderate for posts, and general defense. Custom middleware assigns tiers.

Professional Web Forms

Professional Web Forms

Transcript

Server-side Validation and Custom Error Messages

Transcript