DEV Community: Bryan Smith

Submitting a form in Nextjs 14 with onBlur, server actions, and validation

Bryan Smith — Wed, 07 Feb 2024 19:10:21 +0000

Want a straightforward article on submitting a form in Nextjs to a server action using an HTML event onBlur? And with form validation?

Then this is the article for you. I found the documentation on Nextjs.org lacking, so I'm putting this here for you.

This article is suitable for other events, such as onChange. Still, I prefer onBlur; as you know, the user is done typing, and you don't have to mess with debouncing.

The Form

This tutorial has a simple input field within the form asking for a name.

I want the user to save the field without hitting a submit button. So, the form has no buttons; the user types and the code does the rest.

"use client";

import React from "react";
import { useFormState } from "react-dom";
import { saveName } from "@/src/libs/actions/SaveName";

export default function NameForm() {

  const initialState = { message: "", errors: {} };
  const [state, formAction] = useFormState(saveName, initialState);

  return (
    <form action={formAction}>
      {state && state.message && <div>{state.message}</div>}
      <div>
        <label htmlFor="name">
          Enter your name
        </label>
        <div>
          <input
              name="name" 
              id="name"   
              type="text"
              required
              placeholder="Ex. Brandon Sanderson"
              onBlur={async (e) => { 
                const formData = new FormData();
                formData.append("name", e.target.value);
                await formAction(formData); 
              }}
          />
          {state && state.errors?.name &&
            name((error: string) => (
              <p key={error}>
                {error}
              </p>
            ))}
        </div>
      </div>
    </form>
  );
};

Okay, let's break this down. To make our lives easier and provide error messages, we're using the React hook useFormState. As of this writing, this newer feature is only available in a Canary build. But it's been stable for me.

const initialState = { message: "", errors: {} };
const [state, formAction] = useFormState(saveName, initialState);

We first create a state object, which we'll use to handle our validation messages.

We then create our state object and formAction by passing to useFormState a reference to our function (a NextJS server action) and the initial state.

<form action={formAction}>

We use the Nextjs syntax to call our server action in our form. If you don't include this when a user hits enter within a field, it will not call your server action.

<input
  name="name" 
  id="name"   
  type="text"
  required
  placeholder="Ex. Brandon Sanderson"
  onBlur={async (e) => { 
    const formData = new FormData();
    formData.append("name", e.target.value);
    await formAction(formData); 
  }}
/>

The input is standard right up to the onBlur. We cannot call the form's action from onBlur, but we can trigger the same action ourselves. But you must make a FormData object yourself. FormData is just a simple interface; you can create it with a call to new FormData(). We then populate it with an append, which requires a key/value pair. Then, we call our server action created via the hook.

The Server Action

For the server action, we'll include validation since we want to give the user an experience that lets them know if something has gone wrong.

"use server";

import { z } from 'zod';

const NameFormSchema = z.object({
    name: z.string().min(2, { message: 'You must enter at least two characters'}),
});

export type State = {
    errors?: {
        name?: string[];
    };
    message?: string | null;
}

export async function saveWebsite (prevState: State | undefined, formData: FormData) {

    // Validate Inputs
    const validatedFields = WebsiteFormSchema.safeParse({
        name: formData.get('name'),
    });

    // Handle Validation Errors
    if (!validatedFields.success) {
        const state: State = {
            errors: validatedFields.error.flatten().fieldErrors,
            message: 'Oops, I think there\'s a mistake with your inputs.',
        }

        return state;
    }

    // Do your save here...
}

I'm a big fan of Zod, a typescript validation library. You could roll this yourself. But why do life in hard mode?

Let's break this code down

const NameFormSchema = z.object({
    name: z.string().min(2, { message: 'You must enter at least two characters'}),
});

Zod uses a schema format. So first, you need to tell it the schema of the form you'll be using. Each field you're submitting will have an entry. In this case, just one field.

export type State = {
    errors?: {
        name?: string[];
    };
    message?: string | null;
}

This is the type we'll be using for our form state. We must define its type fully because we're populating it and using TypeScript. We use this object to pass back errors. If you look at the form, you can see how it's used, as it's fairly straightforward.

// Validate Inputs
    const validatedFields = WebsiteFormSchema.safeParse({
        name: formData.get('name'),
    });

    // Handle Validation Errors
    if (!validatedFields.success) {
        const state: State = {
            errors: validatedFields.error.flatten().fieldErrors,
            message: 'Oops, I think there\'s a mistake with your inputs.',
        }

        return state;
    }

Validation is also straightforward with Zod. First, we safely parse the fields we want. Then, we check for any errors that were created during the parse. If they exist, we package them up into our state object.

The last step is up to you. Save to a database or call an API. But be sure to capture any errors and use the state object if they occur.

How to find problems worth solving

Bryan Smith — Thu, 30 Nov 2023 15:30:00 +0000

It's a surprisingly common question

My answer to everyone is, in short, “Always be looking for pain.” Then be sure to evaluate and validate it (or at least start evaluation and validation as you code. I get it, builders are gonna build.)

Constantly be listening for pain

You can find ideas in surprising places. Some of my favorites are:

At the office (assuming you have a 9-5)
Friends & family in a professional field
Online communities

I almost always look for B2B problems when looking for pains to solve. I’m not interested in B2C (other than my desire to make a game someday).

As long as you’re listening and reading with intention, you’ll find problems to solve.

It’s as simple as that. If you have a problem-solving mindset, you’ll start running across problems constantly.

Warning — Just because you can solve a problem doesn’t always mean your audience wants or needs you to. My wife can attest to this 😂 but also that I’ve finally learned it.

So what are people saying?

At the office…

One of my Boring Business SaaS experiments was born out of a common problem with many solutions on the market today. But many have too much overhead or have moved upmarket to enterprise buyers, thus making room for me.

Like most ideas at the office, it started with a conversation like this, “Hey, do we have something to let me do X?”

But many other ideas are from being stuck doing a task manually or using an existing software solution that sucks (I’m pretty sure Notion started because one of their founders had to use Confluence).

…many ideas are from being stuck doing a task manually or using an existing software solution that sucks

To Friends & family…

People complain they don’t know an industry well enough to find ideas. That’s fine, but guess who does? Someone in that field.

I know people in construction, legal, medical, and housekeeping in my family. A couple are even business owners. In a simple conversation on how things are going, invariably, something will scream, “There’s a pain in my field.”

Case in point

My sister-in-law has a housekeeping business. Running a cleaning business has unique scheduling problems, including billing, etc.
My brother-in-law is a lawyer. Wow, talk about an industry behind the curve in technology! Back office problems, legal solution problems, and so on, there’s plenty of room to build something.
My wife and another brother-in-law are in the medical field. This one is harder to get into solution-wise because of HIPAA requirements. But it’s a field dominated by one large vendor. There are all sorts of interesting problems at play. And it has a rich history of doctors championing new solutions.
Another brother-in-law (Can you tell my wife is from a large family?) was in construction. Again, there are tons of things that could be improved. Tracking building supplies, scheduling subcontractors, invoicing, and more.

I could go on. I have friends in state government, friends working for other software companies, doing all sorts of things. But instead, let me give you an example.

Meet Wouter

Wouter, whom I met in the MicroConf Connect community back in 2020 has a SaaS for law firms. It simplifies intake for new clients.

He’s not a lawyer. His wife is.

And that’s where the story of his SaaS started. His wife’s own frustration with the software systems and the duplicative work they often required.

There had to be a better way.

And there was. Wouter started in 2020 and 3 years later is rapidly growing and solving this exact problem.

All because he was listening for pain.

Online Communities…

People talk.

They also love to complain.

Somedays, that’s what I think the internet was made for.

But this is good news for you. Because if you’re looking for a problem to solve, a problem people are discussing online is a great place to start.

Amy Hoy is the champion of finding problems this way. She even coined a phrase called Sales Safari.

A quick recap is:

People gather online
Find an audience you think you can speak to or help
Read what they’re talking about
Sort what you’re hearing
You’ll see common patterns
There are solutions you can provide (not just software!)

Once you get in the mindset, you can’t help but find problems. But is that idea worth solving?

Problem Validation: Is software the solution?

As the saying goes, everything looks like a nail when your only tool is a hammer.

A lot of indie hackers need help at this stage. They have an idea and know how to write software, so they go write software.

But the real question is, is software the right solution?

This is where I lean in and ask more questions, forcing myself to consider the alternatives.

Could a simple update to training be a better solution?
Could a change in the process fix it?
Does it even need to be done?! (Lots of things get done in corporate America that waste time and resources.)

Amongst other things, I’m checking my bias toward software.

Market research — Are there already competitors (I hope so!)

Next, I want to see if there’s already competition. And I’m hoping there is. I’ve already done the “create a new market game” (future article), which is exhausting.

I like boring SaaS problems. Problems that have been solved by others because they’ve done one of the most challenging lifts for me already. They’ve validated there’s a market already.

Many IndieHackers are afraid of competition. But guess what!? There are 8 billion people on earth. And there are over 334 million companies worldwide. There’s plenty of room for you. This is why having a mindset of abundance is so essential.

As I look into competitors, I’m doing the following:

I’m evaluating if there is a broader need. Current solutions == yes, no solutions be wary.
I’m looking for clues on how big of a market there is (a bunch of people fighting in the same small pond is not a good idea).
I’m seeing what people are saying about these companies. Competition is a fantastic source of intel. Looking at what people complain about in their current software is a great way to find your space.
I’m looking to see if others are seeking the same pain. And I’m looking to see if their language is the same as the competitors I’ve identified.

Pro tip - I like looking at companies’ language in their hero statement and searching in communities to see if others are asking for solutions that match that language. The more asking, the better.

I like spaces where competition is already happening, AND people are unsure of a solution (thus complaining about the pain).

Also, it’s a great way to start thinking about your positioning.

This is great because next up, I’m thinking about how to reach my audience.

Marketing — How will I reach my audience?

As I dig in, look at the competition, and reflect on how I discovered this pain, I ask one key question: “Why were they not already aware of a solution?”

Maybe they are, but what they see in the market doesn’t match their need?
Perhaps they are priced out?
Maybe they’re not the actual purchaser? In other words, there may be demand, but no one is willing to pay?
Perhaps they weren’t aware of a solution, so there’s a market mismatch in positioning and pain? (See the pro tip above)
The list goes on.

I’m asking myself these questions because before committing to an idea, I always want to know what my marketing plan will look like.

That’s great, but how do I select one idea over another?

I’m probably thinking about 5 to 10 ideas at any given time. That’s why I could rapidly come up with my two choices for my Boring SaaS Business Experiment.

At this point, for all the ideas I’m deciding from, I’ve:

Decided there is a pain worth solving for because...
There’s competition.
The market is big enough for me, too.
I have an idea of how I can reach them.
And I care about the problem enough to grind it out. Building a SaaS is challenging on the best of days. If you’re not passionate about the problem, walk away.

The last one is a big one. There are plenty of ideas. Find the ones you’re interested in.

So there you have it. That’s how I find ideas and evaluate them. Ultimately, I’m looking for ones where the market is big enough, and it fits my interests.

Is there another way to evaluate ideas?

Jason Cohen of WPEngine and SmartBear thinks so. He’s has a great post, “Excuse me, is there a problem?”

He’s noticed something I’ve seen as well. Many people are trying to solve problems that are not viable to build a business. Not even a solopreneur company.

Check out the article. It’s written with indie hackers in mind. He provides an excellent evaluation flow diagram and an interesting rubric to evaluate ideas.