Mostly they don't disable submit button and throw a client-side error when all inputs are empty

but if that's your scenario, you would need controlled inputs with states for them

depending on the states, you can disable/enable the submit button, what's your trouble?

I am not familiar with controlled forms.

then you just disabled submit button by default?

Have your input state live in the client component and then check for desired length on each. Set your enable/disable state based on that.

yeah i do

any online blogs about controlled inputs will give you clear idea

it's just about using states - nothing more than it

you must know states, right?

yeah i do

what about the link between client and server component?

how are they linked?

"linked"

maybe an example would be great?

sorry, what do you mean by link between client and server component?

why is it related to controlled/uncontrolled inputs?

you would need to clarify the problem

i will

to have controlled inputs you need states so that your page is a client component NOT a server component

Try to isolate your form to just the issue with inputs and determining enable and disable states.

I read something about server side validation and wonder how to incorporate it ?!

but this is my form structure so far:

import type { FormSection } from '@/types/form'

import Container from '@/components/authentication/form/container'
import Section from '@/components/authentication/form/section'
import Field from '@/components/authentication/form/field'

export default function Form({ action, sections }: Properties) {
  return (
    <Container action={action} enabled={false}>
      {sections.map((section, sectionIndex) => (
        <Section key={sectionIndex} section={section}>
          {section.fields.map((field, fieldIndex) => (
            <Field key={fieldIndex} field={field} />
          ))}
        </Section>
      ))}
    </Container>
  )
}

type Properties = {
  action: (formData: FormData) => Promise<void>
  sections: FormSection[]
}

normally when you have server side validation, better to keep your submit button enabled always

ok

if it's disabled by default (like your current solution) and you never submit data

your server side validation never works

ok

ofc you would need both server & client side validation

but even for the client side validation, I would recommend you to have submit button enabled

and what they normally do is e.preventDefault() in your form submission handler and then validate

how would server side validation look like?

@Cuvier’s Dwarf Caiman are you using a server action?

yes I do

I would recommend this then
https://next-safe-action.dev/

thanks a lot

to both of you

⬆️