SolidJS•2mo ago

submission error doesn't show when js is disabled

export default function Home() {
  const form = useSubmission(login);

  return (
    <Show when={form.error}>
      {(error: Accessor<Error>) => <p>{error().message}</p>}
    </Show>
  );
}

export default function Home() {
  const form = useSubmission(login);

  return (
    <Show when={form.error}>
      {(error: Accessor<Error>) => <p>{error().message}</p>}
    </Show>
  );
}

why this doesn't work with js disabled? this is a "use server" action. form.result shows when js disabled but not form.error.

6 Replies

Max•2mo ago

I could be completely wrong, but doesn't solid still need js to hydrate the server rendered content? I remember seeing some examples with static generation, but I don't know how well that fits your use case but even then I think if you to run without any js on client you have to go with classic http driven server that just sends resonses to requests, I dont know if you can do that in solid with just server side routing and I would think that means complete page fetching on each change which can work

HusseinOP•2mo ago

this is a solid start form. its supposed to be progressively enhanced i.e. run without js

Max•2mo ago

ah nice thats cool, didn't know worked like that

Madaxen86•2mo ago

Can you also post your form or the complete component? How do you validate / where does the error get thrown? If you use a form library like ModularForms and schema validation (Zod, Valibot, Yup,....) you have to also parse the data in the actionm because without js there will be no validation otherwise.

HusseinOP•2mo ago

import { action, redirect, useSubmission } from "@solidjs/router";
import { type Accessor, Show } from "solid-js";

export default function Home() {
    const login = action(async (data: FormData) => {
        "use server";

        const username = data.get("username");
        const password = data.get("password");

        if (typeof username !== "string" || typeof password !== "string")
            throw new Error("Invalid input");

        if (username === "a" && password === "b") throw redirect("/register");
        if (encodeURIComponent(username) !== username)
            throw new Error("Invalid username");
        return JSON.stringify({ username, password });
    }, "login");

    const form = useSubmission(login);

    return (
        <div>
            <h1>Login</h1>
            <Show when={form.pending}>
                <p>Submitting...</p>
            </Show>
            <Show when={form.result}>{(result) => <p>{result()}</p>}</Show>
            <p>
                Don't have an account? <a href="/register">Register</a>
            </p>
            <Show when={form.error}>
                {(error: Accessor<Error>) => <span>{error().message}</span>}
            </Show>
            <form action={login} method="post">
                <div>
                    <input name="username" required placeholder="Username" />
                </div>
                <div>
                    <input
                        required
                        type="password"
                        name="password"
                        placeholder="Password"
                    />
                </div>
                <button>Submit</button>
            </form>
        </div>
    );
}

import { action, redirect, useSubmission } from "@solidjs/router";
import { type Accessor, Show } from "solid-js";

export default function Home() {
    const login = action(async (data: FormData) => {
        "use server";

        const username = data.get("username");
        const password = data.get("password");

        if (typeof username !== "string" || typeof password !== "string")
            throw new Error("Invalid input");

        if (username === "a" && password === "b") throw redirect("/register");
        if (encodeURIComponent(username) !== username)
            throw new Error("Invalid username");
        return JSON.stringify({ username, password });
    }, "login");

    const form = useSubmission(login);

    return (
        <div>
            <h1>Login</h1>
            <Show when={form.pending}>
                <p>Submitting...</p>
            </Show>
            <Show when={form.result}>{(result) => <p>{result()}</p>}</Show>
            <p>
                Don't have an account? <a href="/register">Register</a>
            </p>
            <Show when={form.error}>
                {(error: Accessor<Error>) => <span>{error().message}</span>}
            </Show>
            <form action={login} method="post">
                <div>
                    <input name="username" required placeholder="Username" />
                </div>
                <div>
                    <input
                        required
                        type="password"
                        name="password"
                        placeholder="Password"
                    />
                </div>
                <button>Submit</button>
            </form>
        </div>
    );
}

Madaxen86•2mo ago

I created a stackblitz, but unfortunately disabling JS on stackblitz does not work. But I tested the code on my local machine and the error is shown correctly. Maybe you just need to update to the latest version of @solid/router? https://stackblitz.com/edit/github-sdgul2-hvm2vc?file=src%2Froutes%2Findex.tsx

StackBlitz

Solid-start With Tailwindcss Example (forked) - StackBlitz

Run official live example code for Solid-start With Tailwindcss, created by Solidjs on StackBlitz

Gaming

Programming

submission error doesn't show when js is disabled